reactjs – React：动态导入jsx

此问题与将JSX文件动态导入React有关.

基本上我们有一个主要组件,它根据存储在数据库中的结构动态呈现其他组件.动态组件存储在子目录“./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”作为导入路径.

如果有一个包含内容的components / index.js呢：

export CompA from "./comp_a";
export CompB from "./comp_b";

然后你做：

import * as Components from "./components"

然后你会用作：

<Components.CompA />
<Components.CompB />
...

希望这可以帮助.

我怀疑你在通过组件道具发送路径时可以加载任何东西,然后应该在React组件生命周期方法内部加载文件,这不是我建议的.

相关文章