React+TypeScript中数组映射时如何判断首个元素并设置背景色

当然可以，核心就是利用Array.map()方法提供的第二个参数index来判断当前元素是否为数组的第一个元素（当index === 0时就是首个元素）。你的代码里有几处小问题，我帮你修正并整理成可运行的版本：

第一步：给数组定义TypeScript类型（增强类型安全） #

// 定义数组元素的类型
interface LogItem {
  createDt: string;
  status: string;
  operatorId: string;
}

const logList: LogItem[] = [
  {"createDt":"2022/12/27", "status":"aaa","operatorId":"001"},
  {"createDt":"2022/12/28", "status":"bbb","operatorId":"002"}
];

第二步：修正映射逻辑并实现样式判断 #

{logList.map((item, index) => {
  // 直接通过三元表达式给样式变量赋值
  const bgColorHeader = index === 0 ? '#BEFF97' : '#808080';
  const bgColorData = index === 0 ? '#DCFDD8' : '#D3D3D3';

  return (
    <TableBody key={item.operatorId}> {/* 建议用元素唯一标识做key，不要用index */}
      <TableRow>
        <TableCell sx={{ backgroundColor: bgColorHeader }}>
          {item.createDt}
        </TableCell>
        <TableCell sx={{ backgroundColor: bgColorData }}>
          {item.status}
        </TableCell>
        <TableCell>
          {item.operatorId}
        </TableCell>
      </TableRow>
    </TableBody>
  );
})}

关键修正点说明： #

• 避免重复变量声明：你原代码重复声明了bgColorHeader，会导致语法错误，直接用const一次性赋值更简洁
• 修正三元表达式逻辑：原代码的三元分支只写了值但未赋值给变量，用const直接赋值的写法更清晰且不易出错
• 修复SX属性写法：sx={{ backgroundColor: bgColorHeader }}不需要给变量额外套一层大括号，直接使用变量名即可
• key的最佳实践：尽量用数组元素的唯一标识（比如operatorId）作为key，避免用index导致列表更新时的渲染异常

这样就能实现只有数组第一个元素的单元格会应用指定背景色的效果。

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