Как вставить немного HTML каждые 3 раза в массив для вывода - PullRequest
Новая
       14

Как вставить немного HTML каждые 3 раза в массив для вывода

0 голосов
/ 13 июня 2019

Я хочу выводить div каждые 3 раза в цикле for.

Вывод не в формате 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 для push, но в любом случае нужно было закрыть любой тег. 

<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>

Ответы [ 2 ]

1 голос
/ 13 июня 2019

Я думаю, что вложенные циклы - самое простое решение: 

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>
    );
  }
0 голосов
/ 13 июня 2019

Другой вариант (который я предпочитаю для удобочитаемости) ниже. 

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>
  );
}
...