无法在 React 中追加新的 Child 组件

Question

我是新手。

我想在单击 SingleButtonComponent 时添加另一个 SingleButtonComponent。我可以使用状态变量 numChildren.

来增加 children 的数量

 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 循环排除在渲染之外..

请建议我每次点击时添加一个child-component的方法。

谢谢

Answer 1

你的 render 函数没有 return 任何东西。

如果您使用的是 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;
}

否则，您必须return一个元素：

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() { ... }
}

无法在 React 中追加新的 Child 组件

Unable to Append new Child Components in react

reactjs

plnkr.co