如何每 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() {

  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() {

  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>

  );

}

Answer 2

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

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>

    );

  }