React新手求教：如何在render方法的JSX中循环渲染状态值

嘿，刚接触React很正常，JSX里确实不能直接写for循环语句，得换个思路来实现你要的效果！我来给你一步步拆解正确的做法：

首先得纠正一个误区：你原来想的那种在JSX里拆分<div>和</div>的写法是行不通的。因为JSX本质是React元素的语法糖，每个标签都会被转换成一个React元素对象，你不能像拼接HTML字符串那样把标签拆开来写，必须生成完整的元素节点。

那正确的思路是什么呢？React里循环渲染的核心是把要渲染的内容转换成数组，再用map方法生成对应的JSX元素数组。针对你的需求，我们可以先把state.squares拆分成每3个元素一组的二维数组（对应三行），然后分别渲染每一行：

完整实现代码 #

render() {
  // 先把squares数组拆分成每3个元素一组的行数据
  const rowGroups = [];
  const { squares } = this.state;
  for (let i = 0; i < squares.length; i += 3) {
    rowGroups.push(squares.slice(i, i + 3));
  }

  return (
    <div>
      <div className="status">{status}</div>
      {/* 遍历每一行，生成board-row容器 */}
      {rowGroups.map((row, rowIndex) => (
        <div key={rowIndex} className="board-row">
          {/* 遍历当前行的每个元素，生成对应的square */}
          {row.map((_, squareIndex) => {
            // 计算每个square对应的原始索引（0-8）
            const originalIndex = rowIndex * 3 + squareIndex;
            return this.renderSquare(originalIndex);
          })}
        </div>
      ))}
    </div>
  );
}

关键细节说明 #

• 分组逻辑：用for循环配合slice方法，把长度为9的squares数组拆成3个长度为3的子数组，每个子数组对应一行的内容。
• 使用map渲染：在JSX里，数组会被React自动渲染成对应的元素列表。我们先遍历行分组生成board-row容器，再在每个容器里遍历子数组生成单个的square。
• key属性：给每个map生成的元素加上key是React的要求，它能帮助React高效识别元素的变化，提升渲染性能。这里用rowIndex和索引计算的方式就足够了。
• 原始索引计算：因为分组后每个子数组的索引是0-2，我们需要用rowIndex*3 + squareIndex还原成原来的0-8的索引，这样renderSquare才能拿到正确的位置参数。

如果你想让代码更简洁，还可以把分组逻辑抽成一个单独的方法：

getRowGroups() {
  const rowGroups = [];
  const { squares } = this.state;
  for (let i = 0; i < squares.length; i += 3) {
    rowGroups.push(squares.slice(i, i + 3));
  }
  return rowGroups;
}

render() {
  const rowGroups = this.getRowGroups();
  return (
    <div>
      <div className="status">{status}</div>
      {rowGroups.map((row, rowIndex) => (
        <div key={rowIndex} className="board-row">
          {row.map((_, squareIndex) => {
            const originalIndex = rowIndex * 3 + squareIndex;
            return this.renderSquare(originalIndex);
          })}
        </div>
      ))}
    </div>
  );
}

这样你的render方法就会更清晰，逻辑也更易维护～

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