React render函数中嵌套for循环改写问题求助

问题描述 #

我是React初学者，网站提示有类似问题但未找到合适答案。我的render函数中有重复的棋盘行代码，想要用两层嵌套for循环改写，但自己写的代码无法运行，请求给出正确的改写方式。

原render代码 #

return (
  
  <div>
    <div className="board-row">
      {this.renderSquare(0)}
      {this.renderSquare(1)}
      {this.renderSquare(2)}
    </div>
    <div className="board-row">
      {this.renderSquare(3)}
      {this.renderSquare(4)}
      {this.renderSquare(5)}
    </div>
    <div className="board-row">
      {this.renderSquare(6)}
      {this.renderSquare(7)}
      {this.renderSquare(8)}
    </div>
  </div>
);

尝试的错误代码 #

return (
  <div>
   {for (let j = 0; j < 3; j++) {
      <div className="board-row">
       {for (let k = 0; k < 3; k++) {
         {this.renderSquare((j*3) + k)}
       }}
      </div>
   }}
  </div>
);

错误原因 #

JSX中{}内只能放置有返回值的表达式，for是语句而非表达式，不会返回任何内容，直接嵌入会触发语法错误。另外内层循环多嵌套了一层{}，属于无效语法。

正确改写方式 #

方法一：嵌套map生成元素 #

利用Array.from创建指定长度的数组，再通过map遍历生成行和方块：

return (
  <div>
    {Array.from({ length: 3 }).map((_, rowIndex) => (
      <div key={rowIndex} className="board-row">
        {Array.from({ length: 3 }).map((_, colIndex) => (
          this.renderSquare(rowIndex * 3 + colIndex)
        ))}
      </div>
    ))}
  </div>
);

方法二：先通过循环构建数组再渲染 #

在立即执行函数里用for循环生成行和方块的数组，再返回渲染：

return (
  <div>
    {(() => {
      const rows = [];
      for (let j = 0; j < 3; j++) {
        const squares = [];
        for (let k = 0; k < 3; k++) {
          squares.push(this.renderSquare(j * 3 + k));
        }
        rows.push(
          <div key={j} className="board-row">
            {squares}
          </div>
        );
      }
      return rows;
    })()}
  </div>
);

注意事项 #

• 给循环生成的外层div.board-row加上key属性（示例中用rowIndex），这是React的要求，用于优化渲染性能并避免控制台警告。

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