根据通过的道具导入组件

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

然后在主组件的视图中为其指定道具。

<MyTable tableHeaders="propA" />

然后在 MyTable 组件访问它作为 require 而不是 import

MyTable.jsx。

import tableHeaders from "tableHeaders.jsx;

....


const tableColumns = tablelHeaders[props.tableHeaders];

希望能帮到别人或者别人能想出更好的解决方案。