reactjs、json、条件付きdivsをループする

Question

私はreactjsを初めて使って、フッタメニューを提供する一連のjsonをループします。

は本当に立ち往生*いただきましouterwrapping要件

私はこのようなルックスを再作成する必要があり、マークアップのこの種のためのソリューション。

0インデックスにそう

<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> 

- インデックス1から - - 「左」クラスでCOLをoutwrapする必要がある「正しい」クラス

私の現在の内部の他のすべての項目をラップする必要がありますreactjsコードはこのように見えますが、私はouterwrappersを追加するのに苦労しています。

{ 
     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メソッドを使用して

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

を任意のコードの重複を避けるためです。個人的には、this.renderItem()の代わりに呼び出せるFooterItemのような別のコンポーネントを作成します。