reactjs菜單-帶嵌套數據的條件運算符-設置活動狀態

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' />替換三元