reactjs - 无法在反应中附加新的子组件

Question

我是新来的反应。

单击 SingleButtonComponent 时，我想添加另一个 SingleButtonComponent。我可以使用状态变量 numChildren 来增加孩子的数量。

 AddChild: function() {
       var numChildren = (this.state.numChildren) +1;
       this.setState({numChildren :numChildren}) 
    },

但是每当我尝试在内部循环时都会出错

 render: function () {
  return ( 
     for (var i = 0; i < this.state.numChildren; i += 1) {
               <SingleButtonComponent AddChild={this.AddChild}/>
        };
  )
}

. 这是它的PLUNKER

我暂时将 for 循环保持在渲染之外。

请建议我每次单击时添加子组件的方法。

谢谢

Answer 1

您的render函数不返回任何内容。

如果您使用的是 React 16，请尝试：

render: function() {
    const arr = [];
    for (var i = 0; i < this.state.numChildren; i += 1) {
        arr.push(<SingleButtonComponent key={i} AddChild={this.AddChild}/>);
    }
    return arr;
}

否则，您必须返回单个元素：

render: function() {
    const arr = [];
    for (var i = 0; i < this.state.numChildren; i += 1) {
        arr.push(<SingleButtonComponent key={i} AddChild={this.AddChild}/>);
    }
    return (<div>{arr}</div>);
}

---

关于你的第二个问题：
React.createClass不推荐使用 ES6 类。您的组件应定义如下：

class MainBody extends React.Component {
    constructor() {
        this.state = { numChildren: 0 };
    }

    AddChild() { ... }

    render() { ... }
}