Question

我对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
    }

Answer 1

let isActive = item.link === activeLink;
item.children.forEach((child)=>{
    if(child.link === activeLink){
        isActive = true;
    }
})

在map函数中的return语句之前执行此操作，并用isActive && <div className='main-nav active' />

替换你的三元组

reactjs菜单 - 具有嵌套数据的条件运算符 - 设置活动状态

1 个答案: