Question

我想将组件路径从父react组件传递到子react组件，并且该子组件应在道具准备就绪时导入该组件，但动态导入依赖于所传递的值应为字符串而不是值可以在运行时解决，

示例

<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中动态发送组件名称以从该文件中选择一个，同时也进行了动态加载。在运行时计算传入的值时，将无法正常工作。

基于道具动态渲染组件

2 个答案: