React：动态导入jsx

  • Z时代
  • 2024-01-10
  • 分类：问答

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

是否可以将所有JSX文件导入“ ./Compontents”并填充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 />
...

希望这可以帮助。

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

以上是 React：动态导入jsx 的全部内容， 来源链接： utcz.com/qa/421980.html

回到顶部