Javascript reactjs，循环遍历标记上的项和if条件

我正在开发一个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>

{
lang.howTiles[0].items.map（函数（项，索引）{
返回(
{index}
项目
写出你的项目并展示给精心挑选的专家组
{
如果（索引==0）{
}
}
)
})
}

我们不能在

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
}

{
索引==0？
：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>
        )
    }
}

{
这个._checkCondition（）
}
_检查条件（索引）{
如果（索引==0）{
返回(
)
}
}

---

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

我们不能在

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
}

{
索引==0？
：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>
        )
    }
}

{
这个._checkCondition（）
}
_检查条件（索引）{
如果（索引==0）{
返回(
)
}
}

---

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

或者您可以尝试其他方法。如果

index==false

将呈现所有介于（）之间的内容。记住——javascript

{！索引&&
(
)}

或者您可以尝试其他方法。如果

index==false

将呈现所有介于（）之间的内容。记住——javascript

{！索引&&
(
)}

Unexpected token bug——我尝试在return（）中包装html片段Unexpected token bug——我尝试在return（）中包装html片段，但效果不错。。但是为什么这需要——而不是上面的示例——是否有一个版本——我所做的是——可以工作的——将它包装在{}中，返回？检查更新的答案，提供一个指向doc的链接，我们为什么不能在jsx中使用if-else？{（（）=>{if（index==0）{'srcSet='/>}}因为你是通过

{（（）=>

创建一个函数，并在其中使用if条件，它会起作用，我在回答中提到，你可以调用一个函数并在其中使用if条件。--另一个答案呢？他说只需用（）这是有效的..但是为什么这样做-而不是上面的示例-是否有一个版本-我所做的-可以工作-将它包装在{}中，返回？检查更新的答案，提供一个链接到文档为什么我们不能在jsx中使用if else？{（（）=>{if（index==0）{'srcSet=''/>}）（）}因为你是通过

{（（）=>

创建一个函数，并且在其中使用if条件，它会工作的，我在回答中提到，你可以调用一个函数并在其中使用if条件。--另一个答案呢？他说只需要用（）^所以这看起来和我之前尝试做的很相似——标记被包装在哪里？是的。也试试这个。只有当索引是'falsy'时（）会被渲染吗？当它到达第一个元素时，索引会是0？不清楚，你是什么意思？如果索引是0-它会在hearewell中被视为false，索引将是int-因为它循环通过一个数据数组--0,1,2--所以不是！index--应该是index==0^，所以这看起来与我之前尝试做的类似--标记包装在哪里？是的。也试试这个。只有在索引是'falsy'的情况下（）会被渲染吗？当它到达第一个元素时，索引会是0？不清楚，你是什么意思？如果索引是0-它会在hearewell中被视为false，索引将是int-因为它在一个数据数组中循环-0,1,2-所以不是！index-应该是index==0