在ReactJS中获取包含数组的数组的数据

Question

在ReactJS中获取包含数组的数组的数据

3

我希望从一个数组中获取另一个数组里的数据，以创建CSS类的条件。到目前为止，我已经可以让它在一个数组中工作，但是数据内部还有另一个数组。

因此，我想要创建一个条件，当第二个数组内有数据时触发。

以下是示例：https://stackblitz.com/edit/react-v9iknk 这是函数内容：

getData = (menu) => {

     return <li className={menu.children !== undefined && menu.children.length > 0 ? 'nav-item ddfull subnav' : 'nav-item'}>
            <a href={menu.link} className="nav-link">{menu.name}</a>
            {(menu.children !== undefined && menu.children.length > 0) &&
                <div className="ddmenu">
                    <ul>
                        {
                            menu.children.map(data => {
                                return this.getData(data);
                            })
                        }

                    </ul>
                </div>
            }
            </li>

    }

问题出在这行代码，当我将它改为：

 return <li className={menu.children.children !== undefined && menu.children.children.length > 0 ? 'nav-item ddfull subnav' : 'nav-item'}>

以下是JSON格式：

{ "name": "level1.3", "link": "#", 
      "children": [
        { "name": "level1.3.1", "link": "#", 
          "children": [
            { 
              "name": "level1.3.1.1", "link": "#" }
            ] 
        }, 
        { "name": "level1.3.1.2", "link": "#", 
      "children": [
        { "name": "level1.3.1.2", "link": "#" }
        ] }
        ] 
      }

注意：我尝试以下操作，因为这是一个数组内嵌数组而不是对象，但仍然出现未定义错误。

menu.children[0].children

- H.Husain

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aravind_reddy · Answer 1

使用条件menu.children !== undefined和menu.children[0].children !== undefined来检查内部数据：

 <li className={(menu.children!== undefined && menu.children.length > 0  &&menu.children[0].children !== undefined && menu.children[0].children.length > 0)? 'nav-item ddfull subnav' : 'nav-item'}>

你也可以使用 lodash 中的 get 方法