反応内に新しい子コンポーネントを追加できません

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ループ

を一時的に保持しています。

おかげ

Answer 1

あなたrender関数は何も返しません。

あなたが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>); 
} 

---

をあなたの2番目の質問について：
React.createClass推奨されていませんがES6クラスを支持しています。上記の提案によって、私は今MainBody.render（）を取得しています：有効な要素（またはnull）と反応返さなければなりません..私は、レンダリング置き換え返信用

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

    AddChild() { ... } 

    render() { ... } 
}