此问题与将JSX文件动态导入React有关.
基本上我们有一个主要组件,它根据存储在数据库中的结构动态呈现其他组件.动态组件存储在子目录“./Components”中.我们将此静态定义为:@H_404_2@
import CompA from './Components/CompA'; import CompB from './Components/CompB'; var components = { 'CompA': CompA,'CompB': CompB }
我们使用以下方式渲染它们@H_404_2@
var type = 'CompA' var Component = components[type]; ... <Component />
虽然这很好用但对我们来说有点太静态了.我们有100个组件(CompA / CompBs)并静态定义它们不起作用.@H_404_2@
是否可以在“./Compontents”中导入所有JSX文件并填充components-array?@H_404_2@
而且,如果我们可以将“./Components”路径作为主要组件的支柱发送,那真正(真正)好的将是什么.主要组件将使用此路径导入.jsx文件.像这样:@H_404_2@
<MainComponent ComponentPath="./SystemComponents">
将使用“./SystemComponents”作为.JSX文件的路径,并且:@H_404_2@
<MainComponent ComponentPath="./UserComponents">
将使用“./UserComponents”作为导入路径.@H_404_2@
如果有一个包含内容的components / index.js呢:
export CompA from "./comp_a"; export CompB from "./comp_b";
然后你做:@H_404_2@
import * as Components from "./components"
然后你会用作:@H_404_2@
<Components.CompA /> <Components.CompB /> ...
希望这可以帮助.@H_404_2@
我怀疑你在通过组件道具发送路径时可以加载任何东西,然后应该在React组件生命周期方法内部加载文件,这不是我建议的.@H_404_2@