reactjs，循環json，條件div

Question

我是reactjs的新手，循環了一組json，它將提供一個頁腳菜單。

真的卡住*請告訴我對於這種outerwrapping要求

我需要重新創建看起來像這樣的標記解決方案。

<div class="row">  
     <div class="main-footer__left"> 
      <div class="row grid__row--offset--30"> 
       <div class="large-45 large-centered columns"> 
        <h2 class="text--uppercase text--light-blue footer-text">Col</h2> 
       </div> 
      </div> 
     </div> 

     <div class="main-footer__right"> 
      <div class="row grid__row--offset--30"> 

       <div class="large-14 large-offset-5 columns"> 
        <h2 class="text--uppercase text--light-blue footer-text">Col</h2> 
       </div> 
       <div class="large-1 columns"> 
        <div class="vert-line--light-blue"></div> 
       </div> 


       <div class="large-14 large-offset-5 columns"> 
        <h2 class="text--uppercase text--light-blue footer-text">Col</h2> 
       </div> 
       <div class="large-1 columns"> 
        <div class="vert-line--light-blue"></div> 
       </div> 


       <div class="large-14 large-offset-5 columns"> 
        <h2 class="text--uppercase text--light-blue footer-text">Col</h2>      
       </div> 

      </div> 

      <div class="row grid__row--offset--30"> 
       <div class="large-15 large-centered columns"> 
        <p class="text--white text--center footer-text">FIXED</p> 
       </div> 
      </div> 
     </div> 
    </div> 

等等0指數 - 需要outwrap與「左」類山坳 - 從指數1 - 需要包裝「正確的」類

我目前內的所有其他項目reactjs代碼看起來像這樣 - 但我正在努力添加外層包裝。

{ 
     lang.menu.map(function (item, index) { 
     return (
      { 
      index === 0 ? <div className='main-footer__left' /> : null 
      } 
     {/* 
     <div key={index} className='large-14 large-offset-5 columns'> 
      <h2 className='text--uppercase text--light-blue footer-text'>{item.title}</h2> 
      { 
      item.switch 
       ? <p className='text--white grid__row--offset--15 footer-text'> 
       { 
        item.children.map(function (child, j) { 
        return (
         <Link key={j} className={'text--white footer-text transition ' + (props.active_language === child.title.toString().toLowerCase() ? activeLang : alternativeLang)} to={urls[j]}>{child.title}</Link> 
        ) 
        }) 
       } 
       </p> 
       : item.children.map(function (child, j) { 
       return (
        <div key={j} className={(j === 0 ? ' grid__row--offset--15' : '')}> 
        <Link className='text--white footer-text transition' to={child.link}>{child.title}</Link> 
        </div> 
       ) 
       }) 
      } 
     </div> 
     */} 
     ) 
     }) 
    } 

Answer 1

你的要求很難理解，但你應該能夠採取這種方法來實現你想要的。您可能需要做一些調整，以content，但這種結構應爲你工作：

{ 
     lang.menu.map(function (item, index) { 
     const content = 
     <div key={index} className='large-14 large-offset-5 columns'> 
      <h2 className='text--uppercase text--light-blue footer-text'>{item.title}</h2> 
      { 
      item.switch 
       ? <p className='text--white grid__row--offset--15 footer-text'> 
       { 
        item.children.map(function (child, j) { 
        return (
         <Link key={j} className={'text--white footer-text transition ' + (props.active_language === child.title.toString().toLowerCase() ? activeLang : alternativeLang)} to={urls[j]}>{child.title}</Link> 
        ) 
        }) 
       } 
       </p> 
       : item.children.map(function (child, j) { 
       return (
        <div key={j} className={(j === 0 ? ' grid__row--offset--15' : '')}> 
        <Link className='text--white footer-text transition' to={child.link}>{child.title}</Link> 
        </div> 
       ) 
       }) 
      } 
     </div>; 
     if(index === 0){ 
      return (
       <div className='main-footer__left'> 
        {content} 
       </div> 
      ) 
     }else{ 
      return (
       <div className='main-footer__right'> 
        {content} 
       </div> 
      ) 
     } 
     }); 
    } 

Answer 2

我不知道我是100％的瞭解您的要求，但如果我讀它的權利，它聽起來像第一件物品應該用<div class="main-footer__left">包裹，其餘包裹<div class="main-footer__right">。假設這是總是如此，你可以這樣做：

renderItem(item) { 
    return (
     <div className='large-14 large-offset-5 columns'> 
     <h2 className='text--uppercase text--light-blue footer-text'>{item.title}</h2> 
     { 
      item.switch 
      ? <p className='text--white grid__row--offset--15 footer-text'> 
       { 
       item.children.map(function (child, j) { 
        return (
        <Link key={j} className={'text--white footer-text transition ' + (props.active_language === child.title.toString().toLowerCase() ? activeLang : alternativeLang)} to={urls[j]}>{child.title}</Link> 
       ) 
       }) 
       } 
      </p> 
      : item.children.map(function (child, j) { 
       return (
       <div key={j} className={(j === 0 ? ' grid__row--offset--15' : '')}> 
        <Link className='text--white footer-text transition' to={child.link}>{child.title}</Link> 
       </div> 
      ) 
      }) 
     } 
     </div> 
    ); 
    } 

render() { 
    return (
     <div> 
     <div class="main-footer__left"> 
      { this.renderItem(lang.map[0]) } 
     </div> 

     <div className="main-footer__right"> 
      { lang.menu.map((item, index) => index > 0 && this.renderItem(item))} 
     </div> 
     </div> 
    ); 
} 

使用renderItem方法，以避免重複的代碼。就個人而言，我會做一個單獨的組件，稱爲像FooterItem可以代替this.renderItem()調用。