基于 props 动态渲染组件答案

【问题标题】：Dynamically render component based on props基于 props 动态渲染组件
【发布时间】：2019-01-19 09:54:30
【问题描述】：

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

例子

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

编辑：我试过 System.import 不起作用

【问题讨论】：

这样做有什么意义？
我想从 json 文件中动态渲染组件
所有的孩子都不一样吗？
是的，它们是不同的，每个都有渲染不同组件的类型
可能重复，请看this回答

标签： reactjs react-native dynamic-import

【解决方案1】：

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

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

<Parent child='one'/>

render(){

 let Component = One;

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

return <Component/>

}

【讨论】：

【解决方案2】：

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

【讨论】：