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

Question

我想从数组中的数组中获取数据，以便为元素上的 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

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方法