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" 
        } 
       ] 
      } 

のようなものが、今私の問題は、アクティブ状態のための論理であるに見えます - 現在、親レベルから、これは正常に動作します - ので、現在のページがある場合/デ/ dienstleistungen - 現在の状態は "item.link === activeLink"です。

今私は、可能な場合は、この

item.linkのようなので、何か===アクティブリンクの子供たちへのリンクをキャッチするために、ここでより多くのロジックを追加したいとします|| （item.children.inArray（アクティブリンク））

//コード

  { 
      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; 
    } 
}) 

マップ機能内のreturnステートメントの前にこれを行ってください、そしてので基本的にアクティブリンクが "/デ/ beliebte-projekte/bundle1" である場合だけisActive && <div className='main-nav active' />