如何在reactjs中將一個組件插入另一個組件onclick？

Question

在這里，我有兩個組成部分。 一個是ComponentOne，另一個是ComponentTwo。 目前，我只渲染一個組件ComponentTwo。

var ComponentOne = React.createClass({
    render: function() {
        <div className="card">
            <h2>Component one</h2>
        </div>
    }
});
var ComponentTwo = React.createClass({
    render: function() {
        <div className="card">
            <h2>Component two</h2>
            <button>Insert</button>
        </div>
        <ComponentOne />
    }
});

如果我單擊“插入”按鈕，則ComponentOne將在componenttwo類元素卡之后插入。 如何使用reactjs實現這一目標？

Answer 1

將ComponentTwo更改為此。

var ComponentTwo = React.createClass({
getInitialState: function(){
   return {"insert":false};
},
handleClick : function(){
    this.setState({"insert":true});
},
render: function() {
    var view;
    if(this.state.insert)          {
      view = <ComponentOne />;
    }

    return <div className="card">
        <h2>Component Two</h2>
        <button onClick={this.handleClick} >INsert </button>
        {view}    
    </div>
}
});