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}/>
        };
  )
}

。 Here is the PLUNKER to it

我暂时保留了for循环的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() { ... }
}

无法在响应中附加新的子组件

1 个答案: