React表格中如何将列表每个元素渲染为独立新行

在React中遍历列表渲染表格行，最简洁的标准写法是使用数组的map()方法，遍历过程中给每个渲染出的同级<tr>元素设置唯一的key属性即可。

完整可直接运行的示例代码如下：

// 待渲染的列表数据
const nameList = ["A", "B", "C", "D"];

export default function NameTable() {
  return (
    <table className="s-table">
      <thead>
        <tr>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        {nameList.map((nameItem, index) => (
          <tr key={index}>
            <td>{nameItem}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

注意事项 #

• 上述示例中用数组索引作为key值，仅适用于当前这种静态固定、无排序/中间插入/中间删除操作的列表场景。如果你的列表后续会做动态增删、排序调整，建议使用每个元素自带的唯一业务标识作为key，避免出现元素状态错位、渲染性能下降的问题。
• 不要在JSX中直接写普通for循环遍历，map()会直接返回映射后的JSX元素数组，是JSX语法下渲染列表的最适配写法，代码更简洁易维护。

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