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

我對reactjs（在這個例子中是循環瀏覽json數據）和菜單 - 子菜單嵌套相當新穎。reactjs菜單 - 嵌套數據的條件運算符 - 設置活動狀態

所以基本上菜單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 === 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> 
      ) 
      }) 
      }

我剛剛想出了這個解決方案。地圖功能裏面return語句之前

const inSubPages = function (obj, activeLink) { 
     for (var k in obj) { 
     if (!obj.hasOwnProperty(k)) continue 
     if (obj[k].link === activeLink) { 
      return true 
     } 
     } 
     return false 
    }

來源

2017-05-18 The Old County

所以基本上如果activeLink是「/德/熱門-projekte/bundle1」 - 然後我希望它在子數組中搜索 - 因爲第一部分將失敗，因爲它不是父鏈接 –

我已經想出了這個 - const inSubPages = function（obj，activeLink）{var k in obj} { （！obj.hasOwnProperty（k））如果（obj [k] .link === activeLink）繼續 {（）return true } } return false } –

那麼現在發生了什麼，就像這種情況變成錯誤的正確，然後呢？ – zenwraight

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

做到這一點，代替你的三元只isActive && <div className='main-nav active' />

來源

2017-05-18 14:39:09

有'Array.prototype.some'方法來檢查是否有任何元素匹配過濾器https：// developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/some?v=example –

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

回答

相關問題