reactjs、アイテムをループし、マークアップの条件がある場合

Question

私はreactjsコンポーネントで作業しています。私はループしている3つのアイテムがありますが、最初のアイテムの下にボタンを表示したいだけです。私は構文エラーが発生しています。

<div className='row grid__row--offset--50'> 
     <div className='small-55 medium-58 large-58 small-centered columns background--white--small border__transparent--top'> 
      { 
      lang.howTiles[0].items.map(function (item, index) { 
       return (
       <div key={index}> 
        {index} 
        <div className='small-60 columns grid__row--offset--30 show-for-small-only'>&nbsp;</div> 
        <div className='small-45 medium-20 small-centered medium-uncentered columns'> 
        <div className='row'> 
         <div className='small-60 medium-45 small-centered columns'> 
         <div className='relative-container'> 
          <img className='centered' src={HowImage1} style={{maxWidth: '50%', marginLeft: '25%'}} /> 

          <h3 className='text--bold text--center'><font><font>Project</font></font></h3> 
          <p className='text--center text--font-size-14'><font><font>Write out your project and show it to a hand-picked group of experts</font></font></p> 
         </div> 
         </div> 
        </div> 
        { 
         if(index==0){ 
         <div className='grid__row--offset--40 row'> 
          <div className='small-40 columns small-centered'> 
          <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a> 
          <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x' /></a> 
          </div> 
         </div> 
         } 
        } 
        </div> 
       </div> 
      ) 
      }) 
      } 

      <div className='medium-60 columns grid__row--offset--30'>&nbsp;</div> 
     </div> 
     <div className='row grid__row--offset--80'>&nbsp;</div> 
     </div> 

Answer 1

私たちは直接、JSX内if-else/switchステートメントを使用使用するかternary operatorまたはJSXから関数を呼び出すと、その内部にif-else/switchを使用することはできません。

使用この：

{ 
    index == 0 ? 
     <div className='grid__row--offset--40 row'> 
      <div className='small-40 columns small-centered'> 
      <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a> 
      <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x' /></a> 
      </div> 
     </div> 
    : null 
} 

更新：

{ 
    this._checkCondition() 
} 

_checkCondition(index){ 
    if(index == 0){ 
     return (
      <div className='grid__row--offset--40 row'> 
       <div className='small-40 columns small-centered'> 
       <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a> 
       <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x' /></a> 
       </div> 
      </div> 
     ) 
    } 
} 

：

別の可能な解決策は、このように、renderメソッドから関数を呼び出して、その内部であれば条件を使用していますJSXでif-elseを使用できない理由については、DOCを参照してください。

Answer 2

他の方法を試すこともできます。 index==falseの間に（）がすべてレンダリングされます。覚えておいてください - javascriptのhas dynamic typing

{!index && 
    (<div className='grid__row--offset--40 row'> 
     <div className='small-40 columns small-centered'> 
     <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a> 
     <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x' /></a> 
     </div> 
    </div>)}