React:动态导入jsx

马丹

这个问题与将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),并且静态定义它们不起作用。

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

而且,如果我们可以将“ ./Components”路径作为对主要组件的支持,那么真正(真正)的好处就是。并且主要组件将使用此路径导入.jsx文件。像这样:

<MainComponent ComponentPath="./SystemComponents">

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

<MainComponent ComponentPath="./UserComponents">

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

gor181

关于具有内容的components / index.js呢?

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

然后,您执行以下操作:

import * as Components from "./components"

那么您将使用:

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

希望这可以帮助。

我怀疑您在通过组件prop发送路径时是否可以加载任何东西,然后应该在React组件生命周期方法内进行文件加载,这是我不推荐的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章