Question

是否有一种方法可以基于从父组件作为道具传递的内容来导入组件，例如

<ComponentA
   componentToLoad = '/path/to/componentB'
/>

，然后在ComponentA中完成

@import localComponent from {props.componentToLoad};

Answer 1

我无法找到完美的解决方案，但是下面提到的解决方法足以满足我的需求。

我创建了公用表头索引文件，其中包含表头的所有位置：

tableHeaders.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的身份访问它

MyTable.jsx：

import tableHeaders from "tableHeaders.jsx;

....


const tableColumns = tablelHeaders[props.tableHeaders];

希望它可以帮助其他人或其他人提出更好的解决方案。

根据传递的道具导入组件

1 个答案: