訪問更深的陣列鍵

Question

我想創建一個支持下拉項目的導航菜單。我創建

var menuItems={ 
items:[ 
{ 
    title:"Home", 
    id:1 
}, 
{ 
    title:"Download App", 
    children:["iOS","Android","Windows"], 
    id:2 
}, 
{ 
    title:"About", 
    id:3 
} 
] 
}; 

這是我的菜單原型類：

var MenuProto = React.createClass({ 
render: function(){ 
    return <li><a>{this.props.title}</a> 
     <ul className="dropdown-menu"> 
     <li><a>{this.props.children}</a></li> 
     </ul> 
    </li> 
} 
}); 

而這正是它被稱爲：

var Menu = React.createClass({ 
    render : function(){ 
    var fullmenu = this.props.items.map(function(item){ 
     return <MenuProto {...item}/> 
    }); 
    return <ul className="nav navbar-nav navbar-right"> 
     {fullmenu} 
    </ul> 
    } 
}); 

顯然this.props.children得到所有的陣列和使用它在菜單上呈現它，而我需要它來一一獲取它們。我已經嘗試創建一個變種類似於fullmenu這將遍歷this.props.children的兒童一個接一個，但我不知道如何。

我還需要就如何使有條件的提示，看對象是否或不必須的孩子關鍵。

任何幫助將不勝感激。

Answer 1

您可以this.props.children使用React.Children utilities迭代：

var MenuProto = React.createClass({ 
render: function(){ 
    return <li><a>{this.props.title}</a> 
     <ul className="dropdown-menu"> 
     {React.Children.map(this.props.children, function(child) { 
      return <li key={child.id}><a>{child.title}</a></li> 
     })} 
     </ul> 
    </li> 
} 
}); 

既然要支持嵌套項目，你需要一些額外的定製邏輯。

您可以通過簡單地測試whatever.children是否存在來檢查對象是否具有children密鑰;如果它沒有那個鍵，它將是一個虛假值（特別是undefined）。