访问更深的数组键

Question

我正在尝试创建一个支持下拉项的导航菜单。我创造了

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

这是我的菜单原型Class:

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 的 var ，它将遍历 this.props.children 的子项一个接一个，但我想不通。

我还需要有关如何创建条件以查看对象是否具有 children 键的提示。

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 React.Children utilities:

迭代 this.props.children

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）。

访问更深的数组键

Accessing deeper array keys

reactjs

react-jsx