在动态添加组分反应

Question

我需要通过使其添加组分反应：

<componentName ..... /> 

然而，组件的名称是未知的，从一个可变的到来。 我该如何渲染？

Answer 1

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

// 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 />; 
} 

Answer 2

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

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。

Answer 3

Okay, for me this worked: 

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

let components = {}; 

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

然后在我的课上： 从'..... json'导入customComps; .... let Component = Custom.default [customComps.componentName];

 return (
     <Component