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'}>

您还可以使用get中的lodash方法

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

1 个答案: