reactjs - 在react中动态添加组件

Question

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

<componentName ..... />

但是，组件的名称未知并且来自变量。我怎样才能渲染它？

Answer 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了解更多信息。