Javascript 如何每3次将一些HTML推送到数组进行输出

我想在for循环中每隔3次输出div

输出呈现为非HTML格式

我如何解决这个问题

render() {
    const squareItems = [];

    for (var i=0; i < 9; i++) {
        if ((i % 3) == 0){
            squareItems.push('<div class="row">');
        }
        squareItems.push(this.renderSquare(i));

        if ((i % 3) == 2){
            squareItems.push('</div>');
        }
    }

    return (
      <div>
        { squareItems }
      </div>
    );
  }

render（）{
常数平方项=[]；
对于（变量i=0；i<9；i++）{
如果（（i%3）==0）{
平方项。推（“”）；
}
squareItems.push（这个renderSquare（i））；
如果（（i%3）==2）{
平方项。推（“”）；
}
}
返回(
{squareItems}
);
}

我需要结果：

我尝试使用JSX来推送，但无论如何它都需要关闭任何标记

<div class="row">
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>
<div class="row">
 <div>4</div>
 <div>5</div>
 <div>6</div>
</div>
<div class="row">
 <div>7</div>
 <div>8</div>
 <div>9</div>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9

我认为嵌套循环是最简单的解决方案：

render（）{
常数平方项=[]；
对于（变量i=0；i<3；i++）{
推(
{Array（3）.map（（u，j）=>this.renderSquare（i*3+j））}
);
}
返回(
{squareItems}
);
}

下面是另一个选项（我更喜欢可读性）

render() {
  return (
    <div>
      {Array(3).fill().map((_, index) => (
        <div class="row">
          {this.renderSquare(index * 3)}
          {this.renderSquare(index * 3 + 1)}
          {this.renderSquare(index * 3 + 2)}
        </div>
      ))}
    </div>
  );
}

render（）{
返回(
{Array（3）.fill（）.map（（_，index）=>(
{this.renderSquare（索引*3）}
{this.renderSquare（索引*3+1）}
{this.renderSquare（索引*3+2）}
))}
);
}

如果希望行/正方形的数量是动态的，可以使用以下方法：

render() {
  const rowCount = 3;
  const squaresPerRow = 3;

  return (
    <div>
      {Array(rowCount).fill().map((_, rowIndex) => (
        <div class="row">
          {Array(squaresPerRow).fill().map((_, squareIndex) => (
            this.renderSquare(rowIndex * squaresPerRow + squareIndex)
          ))}
        </div>
      ))}
    </div>
  );
}

render（）{
const rowCount=3；
常数平方箭头=3；
返回(
{Array（rowCount）.fill（）.map（（\ux，rowIndex）=>(
{Array（squaresPerRow）.fill（）(
this.renderSquare（行索引*平方箭头+平方索引）
))}
))}
);
}

如果您尝试放置html，然后尝试使用

危险的html

，我发现您正在混合html和jsx（在

这个.renderSquare（i-1）

）。尽量只吃一个

render() {
  const rowCount = 3;
  const squaresPerRow = 3;

  return (
    <div>
      {Array(rowCount).fill().map((_, rowIndex) => (
        <div class="row">
          {Array(squaresPerRow).fill().map((_, squareIndex) => (
            this.renderSquare(rowIndex * squaresPerRow + squareIndex)
          ))}
        </div>
      ))}
    </div>
  );
}