javascript - 动态添加新组件

Question

我一直在玩 ReactJS 并且有两个组件，例如:

/** @jsx React.DOM */

var MyDiv = React.createClass({
   render: function () {
      return (
         <div>
             Hello World
         </div>
      )
   }
});

var MyClickableDiv = React.createClass({
   addDiv: function () {
      alert("Hello World"); //For testing
   }
   render: function () {
      return (
         <div>
             <MyDiv />
             <a href='#' onClick={this.addDiv}>Add new MyDiv</a>
         </div>
      )
   }
});

我想做的是:点击“添加新的 MyDiv”后，我想在已有的第一个 MyDiv 下添加一个新的 MyDiv 组件。

Answer 1

我认为更响应式(Reactive)的方法是使第二个 div 是否存在的状态显式化，并将所有渲染放在 render 函数中而不是拆分它，一半在 render 中，另一半在 addDiv 中.

var MyClickableDiv = React.createClass({

   getInitialState: function(){
       return {showDiv: false};
   },

   addDiv: function () {
       this.setState({showDiv: true});
   },

   render: function () {
      return (
         <div>
             <MyDiv />
             {this.state.showDiv ? <MyDiv /> : null}
             <a href='#' onClick={this.addDiv}>Add new MyDiv</a>
         </div>
      )
   }
});

如果您希望 addDiv 在您再次单击时继续添加 div，请更改状态，以便保留应呈现的额外 div 的列表而不是 bool 标志。