React -配置文件中需要使用组件中异步请求到的数据

Posted 2022-10-27 WHOVENLY

最近遇到了一个需求
先简单介绍下项目：该项目有一个父类组件，该组件用于提供页面所需的公共数据及内容，后续所有的组件都需要继承该组件获得公共的数据。
现在遇到的问题是：我需要在某个组件中引入一个js配置文件，并且该配置文件中的数据又必须来子组件，因为该数据从父类组件中继承下来。
那么思路是这样的：首先我们将配置文件写成导出一个方法，并且该方法返回配置数据的形式，然后在组件文件中引入该配置文件，然后在state中定义一个状态存储配置文件返回的数据（也就是调用配置文件导出的方法，并且将配置文件需要的值传递进去）

组件代码

import React,  Component  from "react";
import  babel  from "./configOption";//引入配置文件
// 这部分原本应该是在继承组件componentDidMount生命周期中通过请求接口获取相应数据
// 这里为了方便，我直接使用变量定义一些数据
const data = 
  female: "女",
  male: "男",
;

export default class App extends Component 
  state = 
    sex: "",
    source: babel(data),//将配置问价需要的参数传递进去，并且将配置好的对象返回，在页面中使用
  ;
  componentDidMount() 
  render() 
    const options = this.state.source.sexList.map((it,i) => <option value=it.value key=i>it.label</option>)
    return (
      <div>
        <select name="" id="">
          options
        </select>
      </div>
    );
  

配置文件configOption.js代码

//将需要的数据对象传入
export const babel = (location) => (
  sexList: [
     label: location.male, value: "male" ,
     label: location.female, value: "female" ,
  ],
);