我没能找到完美的解决方案,但下面提到的解决方法对我来说已经足够好了,可以实现我想要的。
我已经创建了公共表标题索引文件,其中包含表标题的所有位置:
表格标题.jsx
let tablelHeaders = {};
tableHeaders['propA'] = require('../tableA/tableAheaders.jsx').default;
tableHeaders['propB'] = require('../tableB/tableBheaders.jsx').default;
tableHeaders['propC'] = require('../tableB/tableCheaders.jsx').default;
...
tableHeaders['propX'] = require('../tableX/tableXheaders.jsx').default;
export default tableHeaders
然后在主构件的视图中,为其指定prop:
<MyTable tableHeaders="propA" />
而在
MyTable
组件访问它作为
require
而不是
import
import tableHeaders from "tableHeaders.jsx;
....
const tableColumns = tablelHeaders[props.tableHeaders];
希望它能帮助别人或者别人会想出更好的解决办法。