Невозможно добавить новые дочерние компоненты в реакции

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

, Вот плунжер к нему

Я временно держал цикл 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() { ... }
}