reactjs - 基于 props 动态渲染组件

Question

我想将组件路径从父反应组件传递给子反应组件，并且该子组件应在道具准备好时导入组件，但动态导入依赖于传递的值应该是字符串而不是要解析的值运行时，任何事情都可以帮助我

例子

<Parent childComponentPath={'../foo/bar'}/>
  cont child = require(this.props.childComponentPath)
  
  <Child/>

编辑：我试过 System.import 不工作

Answer 1

这不起作用，因为打包程序已经打包了文件。与您不能拥有动态需求的原因相同。

您可能需要修改逻辑以接受字符串，然后像工厂一样动态呈现组件。像这样的东西：

<Parent child='one'/>

render(){

 let Component = One;

switch(this.props.child){
   case: 'one':
      Component: One; break;
    case: 'two':
     Component: Two; break;
}

return <Component/>

}

Answer 2

我制作了一个单独的 JS 文件，导入所有外部组件，然后在 props 中动态发送组件名称以从该文件中选择一个，也动态加载。当在运行时计算传入的值时将不起作用。