React数组转表格：如何实现每5个元素自动换行？

你的代码有两个核心问题导致失效：

1. 运算优先级错误：index+1 %5 的计算逻辑不对，因为取模运算符%的优先级高于加法，实际会先计算1%5=1，再加上index，导致判断条件完全偏离预期，正确写法应该是(index + 1) % 5 === 0。

2. JSX语法不合法：React要求每个渲染单元必须是完整的JSX元素（或数组形式的完整元素），你直接在map里零散输出<tr>和</tr>标签是无效的——React无法解析单独的开标签或闭标签，必须将一组TD包裹在一个完整的TR元素内。

下面提供两种可行的解决思路：

方法一：先拆分数组为二维分组，再嵌套渲染 #

先把原数组按每5个元素拆分成一个二维数组，外层map生成TR，内层map生成TD，逻辑清晰直观：

function MyFunction({ rows }) {
  // 拆分数组：每5个元素为一组
  const groupedRows = [];
  for (let i = 0; i < rows.length; i += 5) {
    groupedRows.push(rows.slice(i, i + 5));
  }

  return (
    <table>
      {groupedRows.map((rowGroup, groupIndex) => (
        <tr key={`tr-${groupIndex}`}>
          {rowGroup.map((info, tdIndex) => (
            <td key={`td-${groupIndex}-${tdIndex}`}>
              <p>{info}</p>
            </td>
          ))}
        </tr>
      ))}
    </table>
  );
}

方法二：用reduce直接构建包含TR的JSX元素数组 #

如果不想改变原数组结构，可以用reduce遍历数组，动态向TR中添加TD元素：

function MyFunction({ rows }) {
  return (
    <table>
      {rows.reduce((acc, info, index) => {
        // 每5个元素的起始位置，新建一个TR元素加入数组
        if (index % 5 === 0) {
          acc.push(<tr key={`tr-${index}`} />);
        }
        // 获取最后一个TR，将当前TD添加到它的children中
        const lastTr = acc[acc.length - 1];
        lastTr.props.children = [
          ...(lastTr.props.children || []),
          <td key={`td-${index}`}>
            <p>{info}</p>
          </td>
        ];
        return acc;
      }, [])}
    </table>
  );
}

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