基本上我们有一个主要组件,它根据存储在数据库中的结构动态呈现其他组件.动态组件存储在子目录“./Components”中.我们将此静态定义为：

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 / CompBs)并静态定义它们不起作用.

是否可以在“./Compontents”中导入所有JSX文件并填充components-array？

而且,如果我们可以将“./Components”路径作为主要组件的支柱发送,那真正(真正)好的将是什么.主要组件将使用此路径导入.jsx文件.像这样：

<MainComponent ComponentPath="./SystemComponents">

将使用“./SystemComponents”作为.JSX文件的路径,并且：

<MainComponent ComponentPath="./UserComponents">

将使用“./UserComponents”作为导入路径.