如何在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>
}
});