动态添加新组件

debugcn 发表于 Dev

穆罕比

我一直在玩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组件。

雨果

我认为一种更加反应灵敏的方法是确定第二个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。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。