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

Question

我想在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>
    );
  }

我需要结果:

我尝试使用 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>

Answer 1

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

render() {
    const squareItems = [];

    for (var i=0; i < 3; i++) {
        squareItems.push(<div class="row">
            {Array(3).map((_, j) => this.renderSquare(i * 3 + j))}
        </div>);
    }

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