Reactの別のコンポーネントの中にコンポーネントを動的にレンダリングする

Question

クラスへの参照を動的にコンテナに渡してレンダリングしようとしました。

class Test extends React.Component{ 
     render() { 
      return <div>Test</div> 
     } 
    } 

    class HelloWidget extends React.Component{ 
      constructor(props) { 
       super(props); 

       this.state = { 
        child: Test 
       }; 
      } 

      render() { 
       return <div>{this.state.child}</div>; 
      } 
    } 

    React.render(<HelloWidget />, document.getElementById('container')); 

はjsfiddleでそれを参照してください：https://jsfiddle.net/coolshare/jwm6k66c/2720/

それは何もレンダリングされませんでした...

任意の提案？あなたはあなたが新しい反応する要素を作成するためにReact.createElementを使用する必要が

 this.state = { 
      child: <Test /> 
     }; 

Answer 1

を割り当てているとき

おかげ

Answer 2

は、そのコンポーネントを作成するためにコンストラクタ内であなたのテストの指令を使用してください。このよう

：

render() { 
    return <div>hello {React.createElement(this.state.child)}</div>; 
} 

確認作業fiddle。

Answer 3

HelloWidgetコンポーネントの状態値を動的に変更できます。これはテストコンポーネントに反映されます。 がここにコードされています

class Test extends React.Component{ 

      render() { 
     return <div>{this.props.child}</div> 
    } 
     } 
    class HelloWidget extends React.Component{ 
    constructor(props) { 
     super(props); 

     this.state = { 
      child: "Test" 
     }; 
    } 

    render() { 
     return <div> 
      <Test child={this.state.child}/> 
     </div>; 
    } 
    } 

    React.render(<HelloWidget />, document.getElementById('container')); 

ここでは、作業フィドルのリンクです：https://jsfiddle.net/jayesh24/1uvpg5ej/