最近遇到了一个需求
先简单介绍下项目:该项目有一个父类组件,该组件用于提供页面所需的公共数据及内容,后续所有的组件都需要继承该组件获得公共的数据。
现在遇到的问题是:我需要在某个组件中引入一个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}>{