如何每 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() {&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {Array(3).fill().map((_, index) => (&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.renderSquare(index * 3)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.renderSquare(index * 3 + 1)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.renderSquare(index * 3 + 2)}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );}如果您希望行数/方块数是动态的，您可以使用以下内容：render() {&nbsp; const rowCount = 3;&nbsp; const squaresPerRow = 3;&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {Array(rowCount).fill().map((_, rowIndex) => (&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {Array(squaresPerRow).fill().map((_, squareIndex) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.renderSquare(rowIndex * squaresPerRow + squareIndex)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );}

Answer 2

我认为嵌套循环是最简单的解决方案：render() {&nbsp; &nbsp; const squareItems = [];&nbsp; &nbsp; for (var i=0; i < 3; i++) {&nbsp; &nbsp; &nbsp; &nbsp; squareItems.push(<div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {Array(3).map((_, j) => this.renderSquare(i * 3 + j))}&nbsp; &nbsp; &nbsp; &nbsp; </div>);&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; { squareItems }&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }