動的に追加するコンポーネントは、

Question

私はそれをレンダリングすることにより、コンポーネントを追加する必要があり

が反応する反応します。 どのようにレンダリングできますか？

Answer 1

あなたは、あなたが動的変数/小道具に基づいてそれらを作成することができ、それらすべて

import * as Components from './Components' 

をインポートし、すべての異なるコンポーネント

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

をエクスポートファイルを作成することができます。

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; 

私のクラスでは： から輸入customComps '..... json'; .... letコンポーネント= Custom.default [customComps.componentName];

 return (
     <Component