如何在React JSX的map循环中正确使用if条件判断语句

原代码语法错误原因 #

• 箭头函数语法误用：map的回调如果用圆括号()包裹内容，代表单表达式隐式返回，内部不能直接写if/else这类流程控制语句；需要写多逻辑时要换成花括号{}包裹函数体，手动通过return返回JSX。
• JSX属性位置非法：原代码把active属性写在了</Breadcrumb.Item>闭合标签外侧，所有组件属性必须定义在起始标签的尖括号范围内。
• 冗余代码：两个分支的JSX结构几乎完全一致，仅active状态有差异，不需要重复编写两份组件结构。
• 冗余判断：breadCrumbLink.IsActive == true属于多余写法，布尔值本身可直接作为判断条件，且JS中推荐使用===严格相等避免隐式类型转换问题。

推荐最简实现（无重复代码） #

直接把active属性和类名绑定到条件判断结果即可，不需要分支判断写重复结构：

{breadCrumbData.BreadCrumbLinks.map(breadCrumbLink => (
  <Breadcrumb.Item 
    key={breadCrumbLink.Id}
    className={breadCrumbLink.IsActive ? "active" : ""}
    active={breadCrumbLink.IsActive}
  >
    {breadCrumbLink.LinkText}
  </Breadcrumb.Item>
))}

需分支返回不同结构时的正确写法 #

如果激活态和非激活态的JSX结构差异较大，必须用if/else判断时，可以用以下两种写法：

写法1：花括号包裹回调+显式return #

{breadCrumbData.BreadCrumbLinks.map(breadCrumbLink => {
  if (breadCrumbLink.IsActive) {
    return (
      <Breadcrumb.Item key={breadCrumbLink.Id} className="active" active>
        {breadCrumbLink.LinkText}
      </Breadcrumb.Item>
    )
  }
  return (
    <Breadcrumb.Item key={breadCrumbLink.Id}>
      {breadCrumbLink.LinkText}
    </Breadcrumb.Item>
  )
})}

写法2：隐式返回+三元表达式 #

{breadCrumbData.BreadCrumbLinks.map(breadCrumbLink => (
  breadCrumbLink.IsActive
    ? (
      <Breadcrumb.Item key={breadCrumbLink.Id} className="active" active>
        {breadCrumbLink.LinkText}
      </Breadcrumb.Item>
    )
    : (
      <Breadcrumb.Item key={breadCrumbLink.Id}>
        {breadCrumbLink.LinkText}
      </Breadcrumb.Item>
    )
))}

注意：循环渲染时key属性必须保证唯一，直接绑定数据的唯一Id是符合规范的写法。

内容的提问来源于stack exchange，提问作者Ayo Adesina