在React中構建一個嵌套組件

Question

React中的新功能，尋找一種構建嵌套組件的好方法，給定一個嵌套的props對象。

採取以下基本props例如：

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

我想用它來構建一個嵌套的菜單：

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

雖然這是一個簡單的例子，嵌套會去更加深入。

我已經搜索過這個，我發現的都是預構建的組件。我不是在尋找魔法，我試圖在使用其他組件之前瞭解事情的工作原理。

什麼是生成React組件以有效呈現此內容的最佳方式？

Answer 1

您可以有自己的組件呈現。下面是應該工作純組分例如：

const Item = ({label, children}) => (
    <div> 
    <label>{label}</label> 
    {children.map(child => (
     <Item label={child.label} children={child.children} /> 
    ))} 
    </div> 
); 

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