基于 props 动态渲染组件

Question

我想将组件路径从一个父react组件传递给一个子react组件，这个子组件应该在props准备好时导入组件，但是动态导入依赖于传递的值应该是字符串而不是一个在运行时解析的值，任何东西都可以帮助我

例子

<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 中动态发送组件名称以从此文件中选择一个，也是动态加载。当 require 传入的值在运行时计算时将不起作用。

基于 props 动态渲染组件

Dynamically render component based on props

dynamic-import

reactjs

react-native