React：遍历 javascript 对象键值

Question

如何将我的 props 对象放入一个数组并遍历它？

我有一个带有下拉菜单的引导导航栏。我的代码会扫描 javascript 对象，如果找到键 dropdown，它将根据 dropdown 部分的 javascript 对象中的数据创建一个下拉菜单。

我的 Javascript 对象：

var linksNav = {
    items: [
        {
            "type": "link",
            "title": "Events",
            "href": "#",
            "target": "_self"
        },
        {
            "type": "link",
            "title": "Groups",
            "href": "#",
            "target": "_self",
            "dropdown": 
                {
            "dropItems":
                    [
                        { 
                        "left": "1st left", 
                        "left-option": ["1","2"] 
                        },
                        { 
                        "left": "2nd left", 
                        "left-option": ["1","2"] 
                        },
                        { 
                        "left": "3rd left", 
                        "left-option": ["1","2"] 
                        },
                    ]
                }
        },
        {
            "type": "heading",
            "title": "Capabilities",
            "href": "#",
            "target": "_self"
        },
    ]
}

这是我的LinksNav 类，它通过浏览 javascript 对象来创建导航栏。如果在我的 javascript 对象中检测到 dropdown 项目，它将把它传递给我的 Navsub 组件：

链接导航：

var LinksNav = React.createClass({

    render: function() {

    let navDrop;        
    if (this.props.isDropdown) {
      navDrop = (
        <ul className="dropdown-menu fade">
        <div>{this.props.isDropdown.dropItems[0].left}></div>
         <Navsub isDropdown = {this.props.isDropdown}/>
        </ul>
      )
    }
        return (

            <li className={this.props.title + ' nav-items'}>

             <a href={this.props.href} target={this.props.target} className={this.state.color + ' dropdown-toggle'} onClick={this.onClick} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{this.props.title}</a>

  {navDrop}       
            </li>

        );
    }
});

Navsub： 这是我的Navsub 类，如果可以找到它，我会尝试从我的 Javascript 对象的下拉列表中吐出数据。 ：

   var Navsub = React.createClass({
    render: function() {

        var itemsLeft= [];
       for (var j = 0; j < this.props.isDropdown.dropItems.length; j++) {
            itemsLeft.push(<Navsubrightitems key={j} type={this.props.isDropdown.dropItems[j].left} />);
        }
        return (
            <div className="group-dropdown-menu">
            <div className="dropdown-left-menu">

             {this.props.isDropdown.dropItems[0].left}
             {this.props.isDropdown.dropItems[1].left}
            </div>
             <div className="dropdown-right-menu">
            {itemsRight}

            </div>
            </div>
        );
    }
});

我可以通过 props 成功地从 json 对象中获取下拉列表，正如我的硬编码所见：

{this.props.isDropdown.dropItems[0].left}
{this.props.isDropdown.dropItems[1].left}

，但我想遍历它，以便通过将 left 放入数组中然后吐出这些值来获得 dropItems 下的值。我试图通过this.props.isDropdown.dropItems.length 迭代它来做到这一点，但这似乎是无效的，因为我得到了一个未定义的错误。

Answer 1

看来 props dropDownItems 最初并不存在，因此您需要检查未定义的值，然后您可以使用 map 来迭代这些。你可以这样做

var Navsub = React.createClass({
    render: function() {


        return (
            <div className="group-dropdown-menu">
            <div className="dropdown-left-menu">

             {this.props.isDropdown.dropItems[0].left}
             {this.props.isDropdown.dropItems[1].left}
            </div>
             <div className="dropdown-right-menu">
            {this.props.isDropdown.dropItems && this.props.isDropdown.dropItems.map((listItem, index) => {
                 return <Navsubrightitems key={index} type={listItem.left} />
               })}
            </div>
            </div>
        );
    }
});

Answer 2

我想，这就是你想要的，这样写：

{
     this.props.isDropdown.dropItems && this.props.isDropdown.dropItems.map((item,i) => {
          return <Navsubrightitems key={i} type={item.left} />
     })
}