React组件render中能否用if语句？映射数组首索引遇报错

首先明确说：React组件的render方法里绝对允许使用if语句，你遇到报错大概率是因为在map循环的JSX大括号里直接写了if语句——而JSX的{}只能放表达式（能返回值的代码片段），if是语句，不能直接塞进去。

针对你想处理map首个索引的场景，给你几个可行的写法：

1. 在map回调里先处理if逻辑，再返回JSX #

这是最直接的方式，把if逻辑放在回调函数的主体里，处理完再返回对应的JSX元素，里面嵌套三元也完全没问题：

{yourArray.map((item, index) => {
  let itemElement;
  // 处理首个索引的特殊逻辑
  if (index === 0) {
    // 这里面的三元表达式完全不受影响
    itemElement = <div className="first-item">
      {item.title ? item.title : '默认标题'}
    </div>;
  } else {
    itemElement = <div>{item.title}</div>;
  }
  // 别忘了给元素加唯一key！
  return <React.Fragment key={item.id}>{itemElement}</React.Fragment>;
})}

2. 把渲染逻辑抽成单独函数（更易维护） #

如果你的渲染逻辑比较复杂，把它抽成一个单独的函数会让代码更清晰，也避免在render里堆太多逻辑：

// 单独写渲染函数
const renderListItem = (item, index) => {
  if (index === 0) {
    return <div className="first-item">
      {item.content ? item.content : '默认内容'}
    </div>;
  }
  return <div>{item.content}</div>;
};

// 在render里调用
{yourArray.map((item, index) => (
  <div key={item.id}>{renderListItem(item, index)}</div>
))}

为什么你之前的写法会报错？ #

再强调一遍：JSX的大括号{}是用来嵌入表达式的（比如变量、函数调用、三元表达式这些能算出一个值的东西），而if是控制语句，不能直接放在大括号里。你需要把if逻辑放在大括号外面的函数代码中，把处理后的结果（也就是JSX元素）再放进大括号里。

另外提醒下：map循环里的元素一定要加唯一的key属性，这是React要求的，不然也可能触发警告甚至奇怪的bug，别漏了！

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