reactjs - react : dynamic import jsx

Question

这个问题与将 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”作为导入路径。

Answer 1

拥有一个包含以下内容的 Components/index.js 怎么样:

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

然后你就可以:

import * as Components from "./components"

那么你可以使用:

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

希望这有帮助。

我怀疑你在通过组件 props 发送路径时是否可以加载任何内容，然后文件的加载应该发生在 React 组件生命周期方法中，这不是我推荐的。