Question

警告：很长的帖子，我很反应。

场景：我想创建一个bootstrap下拉菜单。下拉菜单中的某些项目将包含子菜单。

问题：我不确定如何将json值传递给另一个反应变量。

Javascript对象：

var linksNav = {
    items: [
        {
            "type": "link",
            "title": "Events",
            "href": "#",
            "target": "_self"
        },
        {
            "type": "link",
            "title": "Groups",
            "href": "#",
            "target": "_self",
            "dropdown": 
                {
            "dropItems":
                    [
                        { 
                        "left": "First left submenu", 
                        "left-option": ["1","2"] 
                        },
                        { 
                        "left": "Second left submenu", 
                        "left-option": ["1","2"] 
                        },
                        { 
                        "left": "Third left submenu", 
                        "left-option": ["1","2"] 
                        }

                    ]
                }
        },

    ]
}

要创建导航栏，我创建了一个导航变量：

var Navme = React.createClass({

    render: function () {
         var items = [];
        for (var i = 0; i < linksNav.items.length; i++) {
            items.push(<LinksNav key={i} isDropdown = {linksNav.items[i].dropdown} type={linksNav.items[i].type} title={linksNav.items[i].title} href={linksNav.items[i].href} target={linksNav.items[i].target} />);
        }
        return (
<div className="zone">
<nav className="navbar navbar-default blade-nav">
<div className="container-fluid">

  <div className="nav-wrapper collapse navbar-collapse">

          {items}

  </div>
  </div>
</nav>

            </div>
        );
    }
});

我的LinksNav react变量就在这里，这也是它查找下拉json键的地方，如果找到它，它将包含navDrop变量（有我的下拉菜单））使用我的导航菜单项：

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

     let navDrop;        
    if (this.props.isDropdown) {
      navDrop = (
        <ul className="dropdown-menu fade">
        <Navsub />
          </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类，它是我的bootstrap下拉菜单的UI。我想将isDropdown类的LinksNav对象中的值传递给此类，并遍历它以获取我的下拉项。

我尝试传递我的isDropdown对象，如下所示：this.props.isDropdown.dropItems.length，但我收到了一个错误，即dropItems未定义。

  var Navsub = React.createClass({
    render: function() {
        var items = [];
        var rightItems = [];
        for (var i = 0; i < this.props.isDropdown.dropItems.length; i++) {
            items.push(<Navsubleftitems key={i} type={this.props.isDropdown.dropItems[i].left} />);
        }

        return (
            <div className="group-dropdown-menu">
            <div className="dropdown-left-menu">
            {items}
            </div>
             <div className="dropdown-right-menu">
            {rightItems}

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

React：将json值传递给反应类

0 个答案: