Reactでネストされたコンポーネントを作成する

Question

ネストされたpropsオブジェクトを与えられたネストされたコンポーネントのセットを構築する良い方法を探して、Reactで新しい。

次の基本的なprops例ましょう：これは単純な例ですが、ネストはより深い行くだろう

<Item> 
    <Label>Foods</Label> 
    <Item><Label>Chicken</Label></Item> 
    <Item><Label>Pasta</Label></Item> 
</Item> 

：

const props = [{ 
    label: 'Foods', 
    children: [ 
    { label: 'Chicken', children: [] }, 
    { label: 'Pasta', children: [] } 
    ] 
}]; 

私は、ネストされたメニューを構築するためにこれを使用したいと思いますが。

私はこれを捜し求めました。私が見つけたのは、あらかじめ構築されたコンポーネントです。私はまだ魔法を探していません、私は他のコンポーネントを使用する前に、どのように動作するかを理解しようとしています。

Reactコンポーネントを効率的にレンダリングするには、どのような方法が最適ですか？

Answer 1

コンポーネント自体をレンダリングさせることができます。

Answer 2

オースティンの回答にちょうど追加するだけで、必要な数の子を持つことができます。

var Container = React.createClass({ 
    render: function() { 
     var Items = []; 
     var level = 1; 
     var self = this; 

     var addItem= function (filter, level) { 
      filter.forEach((f)=> { 

       Items.push(<Item key={f.Id} data={f} level={level} />) 

       if (f.Children !== undefined && f.Children.length != 0) { 
        addFiler(f.Children, level + 1); 
       } 
      }); 
      level -= 1; 
     }; 

     addItem(this.props.options, level); 

     return (<div>{Items}</div>); 
    } 
}); 

var Item= React.createClass({ 
    displayName: 'filter', 
    onClick: function (e) { 
     this.props.onChange(this.props.data.Id); 
    }, 

    render: function() { 
     return (<div> 
       <label> 
        {this.props.data.Title} 
       </label> 
     </div>); 
    } 
});