如何在React map渲染表格时指定索引位置后插入空tr行

实现思路 #

React 的数组遍历渲染支持返回 JSX 元素数组，只需在对应索引位置同时返回原有数据行和空行即可。注意遍历索引从0开始计数，第6行对应索引为5，第11行对应索引为10。

修改后代码 #

{altmanzscoring.titles.map((val, i) => {
  // 原有业务数据行
  const dataRow = (
    <tr key={`row-${i}`}>
      {val.title == "Altman Z' Puan-İmalatçı Firmalar" ? (
        <td style={{ color: '#007FB2', fontWeight: 'bold' }}>{val.title}</td>
      ) : val.title == "Altman Z' Puan-İmalat Harici Firmalar" && i != 13 ? (
        <td style={{ color: '#007FB2', fontWeight: 'bold' }}>{val.title}</td>
      ) : (
        <td>{val.title}</td>
      )}
      {val.values[0].value == 'Ortalama İflas Riski' ? (
        <td style={{ color: '#ebc634' }}>{val.values[0].value}</td>
      ) : val.values[0].value == 'Düşük İflas Riski' ? (
        <td style={{ color: '#47d14c' }}>{val.values[0].value}</td>
      ) : val.values[0].value == 'Yüksek İflas Riski' ? (
        <td style={{ color: '#e63c41' }}>{val.values[0].value}</td>
      ) : (
        <td>{val.values[0].value}</td>
      )}
      {val.values[1].value == 'Ortalama İflas Riski' ? (
        <td style={{ color: '#ebc634' }}>{val.values[1].value}</td>
      ) : val.values[1].value == 'Düşük İflas Riski' ? (
        <td style={{ color: '#47d14c' }}>{val.values[1].value}</td>
      ) : val.values[1].value == 'Yüksek İflas Riski' ? (
        <td style={{ color: '#e63c41' }}>{val.values[1].value}</td>
      ) : (
        <td>{val.values[1].value}</td>
      )}
    </tr>
  )

  // 匹配第6行、第11行后插入空行
  if (i === 5 || i === 10) {
    return [
      dataRow,
      // colSpan值和你表格的总列数保持一致，&nbsp;保证空行可以正常显示高度
      <tr key={`empty-${i}`}>
        <td colSpan={3}>&nbsp;</td>
      </tr>
    ]
  }

  return dataRow
})}

注意事项 #

• 所有列表元素都添加了唯一key属性，避免React渲染报警
• 原代码存在两处重复的Düşük İflas Riski判断逻辑错误，已在上述代码中标注修正，你可以根据实际高风险的字段名调整对应判断条件
• 如果不需要空行显示高度，可直接把空行简化为<tr key={empty-${i}}></tr>

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