Dynamisch rendern eine Komponente in einer anderen Komponente in React

Question

Ich habe versucht, einen Verweis auf eine Klasse dynamisch an einen Container übergeben und rendern.

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')); 

Sehen Sie es bei jsfiddle: https://jsfiddle.net/coolshare/jwm6k66c/2720/

Es ist nicht alles machen hat ...

Jeder Vorschlag?

dank

Answer 1

Zuordnung werden müssen Sie React.createElement verwenden, um das neue Element reagieren zu erstellen.

So:

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

Überprüfen Sie die Arbeits fiddle.

Answer 2

Verwenden Sie die Richtlinie Ihres Tests innerhalb des Konstruktors, dass die Komponente zu erstellen, wenn Sie

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

Answer 3

Sie können den Statuswert in der HelloWidget-Komponente dynamisch ändern, was sich in Test Component widerspiegeln würde. Hier ist der Code:

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')); 

Hier ist ein funktionierendes Geige Link: https://jsfiddle.net/jayesh24/1uvpg5ej/