这个问题与将 JSX 文件动态导入 React 相关。
基本上,我们有一个主要组件,它根据数据库中存储的结构动态呈现其他组件。动态组件存储在子目录“./Components”中。我们静态地将 this 定义为:
import CompA from './Components/CompA';
import CompB from './Components/CompB';
var components = {
'CompA': CompA,
'CompB': CompB
}
我们使用以下方式渲染它们:
var type = 'CompA'
var Component = components[type];
...
<Component />
虽然这工作得很好,但对我们来说有点太静态了。我们有 100 多个组件 (CompA/CompB),静态定义它们是行不通的。
是否可以导入“./Compontents”中的所有 JSX 文件并填充组件数组?
而且,如果我们可以将“./Components”路径作为 props 发送到主要组件,那就真的(真的)很好了。主组件将使用此路径导入 .jsx 文件。像这样:
<MainComponent ComponentPath="./SystemComponents">
将使用“./SystemComponents”作为 .JSX 文件的路径并且:
<MainComponent ComponentPath="./UserComponents">
将使用“./UserComponents”作为导入路径。