javascript - ReactJS，循环遍历一个项目以及标记上的 if 条件

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 语句，使用三元运算符或从 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
}

更新:

另一种可能的解决方案是从 render 方法调用函数并在其中使用 if 条件，如下所示:

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

有关为什么我们不能在 JSX 中使用 if-else 的更多详细信息，请查看 DOC .