[英]reactjs menu - conditional operator with nested data - setting the active state
我对reactjs相当陌生-在这种情况下,我正在通过菜单-子菜单嵌套遍历json数据。
所以基本上菜单json看起来像这样
{
"title": "Dienstleistungen",
"link": "/de/dienstleistungen",
"children" : [
]
},
{
"title": "Beliebte Projekte",
"link": "/de/beliebte-projekte",
"children" : [
{
"title" : "Bundle1",
"link" : "/de/beliebte-projekte/bundle1"
},
{
"title" : "Bundle2",
"link" : "/de/beliebte-projekte/bundle2"
}
]
}
现在我的问题是活动状态的逻辑-当前在父级别上可以正常工作-因此,如果当前页面是/ de / dienstleistungen-当前“ item.link === activeLink”的条件为true。
现在,我想在此处添加更多逻辑以捕获子链接(如果可能的话),如下所示
item.link === activeLink || (item.children.inArray(activeLink))
//码
{
lang.menu.map(function (item, index) {
return (
<li key={index} className={(item.children.length > 0 ? 'has-dropdown' : '')}>
<Link to={item.link} className='headerbar-link-nav'>{item.title}</Link>
{
item.link === activeLink
? <div className='main-nav active' /> : null
}
{
item.children.length > 0
? <ul className='dropdown'>
{item.children.map(subPage => {
return (<li key={subPage.title}>
<Link to={subPage.link}>{subPage.title}</Link>
</li>
)
})}
</ul>
: null
}
</li>
)
})
}
我只是想出了这个解决方案。
const inSubPages = function (obj, activeLink) {
for (var k in obj) {
if (!obj.hasOwnProperty(k)) continue
if (obj[k].link === activeLink) {
return true
}
}
return false
}
let isActive = item.link === activeLink;
item.children.forEach((child)=>{
if(child.link === activeLink){
isActive = true;
}
})
在map函数内部的return语句之前执行此操作,并用isActive && <div className='main-nav active' />
替换三元
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.