React表格如何实现动态渲染每行序号 前端React开发问题咨询

直接利用数组map方法自带的第二个索引参数生成序号即可，不会操作除prt、cat外的其他字段，完全符合你的使用限制：

• 给filteredData的遍历map方法新增第二个入参index，代表当前行的索引，从0开始计数
• 在<TableRow>的所有列最前方新增一列，渲染index + 1，即可得到从1开始的行序号
• 表头部分对应新增一个空单元格即可匹配你要求的列表头留空的需求

修改后的完整表格代码如下：

return (
    <>    
    <TableBody >
      {/* 新增第二个参数index获取当前遍历项的索引 */}
      {filteredData(props.API_DATA,props.filters).map((row, index) => (
        <TableRow  key={row.name}>
          {/* 新增序号列，放在最开头 */}
          <TableCell style={{ textAlign:"left"}}   align="center">{index + 1}</TableCell>
          <TableCell style={{ textAlign:"left"}}   align="center">{row.bnd}</TableCell> 
          <TableCell style={{ textAlign:"left"}}   align="center">{row.bnd}</TableCell> 
          <TableCell style={{ textAlign:"left"}}  align="center">{row.cnt}</TableCell>
          <TableCell style={{ textAlign:"left"}}  align="center">{row.prt.map((e) => <span style={{padding: "5px"}} key={e} >{`${e + ','}`}</span>)}</TableCell>
          <TableCell style={{ textAlign:"left"}}  align="center">{row.cat}</TableCell>
          <TableCell style={{ textAlign:"left"}}  align="center"><a href={row.url}>{row.url}</a></TableCell>
        </TableRow>
      ))}
    </TableBody>

    </>
)

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