我希望从一个数组中获取另一个数组里的数据,以创建CSS类的条件。到目前为止,我已经可以让它在一个数组中工作,但是数据内部还有另一个数组。
因此,我想要创建一个条件,当第二个数组内有数据时触发。
以下是示例:https://stackblitz.com/edit/react-v9iknk 这是函数内容:
问题出在这行代码,当我将它改为:
以下是JSON格式:
因此,我想要创建一个条件,当第二个数组内有数据时触发。
以下是示例: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
.length
。return <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'}>
- H.Husain