根据传递的 prop 导入组件

Question

有没有一种方法可以根据从父组件作为 prop 传递的内容导入组件，例如

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

然后在ComponentA做

@import localComponent from {props.componentToLoad};

Answer 1

我无法找到完美的解决方案，但下面提到的解决方法足以让我实现我正在寻找的目标。

我创建了通用 table headers 索引文件，其中包含 table headers:

的所有位置

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];

希望它能帮助其他人，或者其他人会想出更好的解决方案。

根据传递的 prop 导入组件

Import component based on passed prop

import

reactjs

react-props

react-component