Question

如何将道具对象放入数组并迭代它？

我有一个带下拉菜单的bootstrap导航栏。我的代码会扫描javascript对象，如果找到了密钥Rx.Observable.fromNodeCallback(dbConnection.query.bind(dbConnection));，它会根据dropdown部分的javascript对象中的数据创建一个下拉菜单。

我的Javascript对象：

dropdown

这是我的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" }, ] }类，它通过浏览javascript对象来创建导航栏。如果在我的javascript对象中检测到LinksNav项，则会将其传递给我的dropdown组件：

LinksNav：

Navsub

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> ); } });类，我尝试从我的Javascript对象的下拉列表中吐出数据，如果它可以找到它。：

Navsub

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

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

，但我想迭代它，以便在{this.props.isDropdown.dropItems[0].left} {this.props.isDropdown.dropItems[1].left}下获得left的值，方法是将其放入数组，然后吐出这些值。我试图通过dropItems迭代它来做到这一点，但似乎无效，因为我得到一个未定义的错误。

Answer 1

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

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

Answer 2

似乎道具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>
        );
    }
});

React：迭代javascript对象键值

2 个答案: