最近遇到了一個需求
先簡單介紹下項(xiàng)目：該項(xiàng)目有一個父類組件，該組件用于提供頁面所需的公共數(shù)據(jù)及內(nèi)容，后續(xù)所有的組件都需要繼承該組件獲得公共的數(shù)據(jù)。
現(xiàn)在遇到的問題是：我需要在某個組件中引入一個js配置文件，并且該配置文件中的數(shù)據(jù)又必須來子組件，因?yàn)樵摂?shù)據(jù)從父類組件中繼承下來。
那么思路是這樣的：首先我們將配置文件寫成導(dǎo)出一個方法，并且該方法返回配置數(shù)據(jù)的形式，然后在組件文件中引入該配置文件，然后在state中定義一個狀態(tài)存儲配置文件返回的數(shù)據(jù)（也就是調(diào)用配置文件導(dǎo)出的方法，并且將配置文件需要的值傳遞進(jìn)去）

組件代碼

import React, { Component } from "react";
import { babel } from "./configOption";//引入配置文件
// 這部分原本應(yīng)該是在繼承組件componentDidMount生命周期中通過請求接口獲取相應(yīng)數(shù)據(jù)
// 這里為了方便，我直接使用變量定義一些數(shù)據(jù)
const data = {
  female: "女",
  male: "男",
};

export default class App extends Component {
  state = {
    sex: "",
    source: babel(data),//將配置問價需要的參數(shù)傳遞進(jìn)去，并且將配置好的對象返回，在頁面中使用
  };
  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代碼

//將需要的數(shù)據(jù)對象傳入
export const babel = (location) => ({
  sexList: [
    { label: location.male, value: "male" },
    { label: location.female, value: "female" },
  ],
});