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

我认为更有反应意识的方法是制作第二个div是否存在的状态，并将所有渲染放在渲染函数中而不是将其拆分，一半在渲染中，另一半在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的列表而不是布尔标记。

动态添加新组件

1 个答案: