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 的 var ，它会逐个遍历this.props.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>
}
});

由于您希望支持嵌套项，因此您需要一些额外的自定义逻辑。

您可以通过简单地测试children的存在来检查对象是否具有whatever.children密钥;如果它没有该密钥，则它将是一个假值（具体为undefined）。

访问更深的数组键

1 个答案: