在反应中动态添加组件答案

【问题标题】：Dynamically adding components in react在反应中动态添加组件
【发布时间】：2017-12-14 16:41:32
【问题描述】：

我需要通过在 react 中渲染来添加组件：

<componentName ..... />

但是，组件的名称未知并且来自变量。我该如何渲染它？

【问题讨论】：

参考这个答案stackoverflow.com/questions/36941829/…

标签： reactjs components

【解决方案1】：

您需要存储对动态组件的引用：

import ComponentName from 'component-name'

class App extends Component {
    constructor(props) {
        super(props)

        this.components = {
            'dynamic-component': ComponentName
        }
    }

    render() {
      // notice capitalization of the variable - this is important!
      const Name = this.components[this.props.componentName];

      return (
        <div>
          <Name />
        </div>
      )
    }
};

render(<App componentName={ 'dynamic-component' } />, document.getElementById('root'));

请参阅react docs 了解更多信息。

【讨论】：

感谢官方文档的链接，错过了！

【解决方案2】：

您可以创建一个导出所有不同组件的文件

// Components.js
export Foo from './Foo'
export Bar from './Bar'

然后全部导入

import * as Components from './Components'

然后您可以根据变量/道具动态创建它们：

render() {
  // this.props.type = 'Foo'
  // renders a Foo component
  const Component = Components[this.props.type];
  return Component && <Component />;
}

【讨论】：

【解决方案3】：

Okay, for me this worked:

import {Hello} from 'ui-hello-world';

let components = {};

components['Hello'] = Hello;
export default components;

然后在我的课堂上：从'.....json'导入customComps； …… 让组件 = Custom.default[customComps.componentName];

      return (
        <Component

【讨论】：