Как выполнить JS в JSX (React), не выводя его в виде HTML?

Question

Как бы вы собрали этот HTML, используя jsx / реагировать. Моя проблема в том, что i++ всегда выводится как часть html, хотя я бы предпочел выполнить его.

const rows = [];

for (let i = 0; i < items.length; i++) {
  let row;
  if (i + 1 < items.length) {
    // on all but the last item we have to items in a row
    row = (
      <div className="bpa-module-tile-row">
        {this.getItem(items[i])}
        i++;
        {this.getItem(items[i])}
        )
      </div>
    );
  } else {
    // if we have an odd number of items, then the last row has only one not two items in a rowj
    row = (
      <div className="bpa-module-tile-row">{this.getItem(items[i])}</div>
    );
  }

  rows.push(row);
}

Затем rows выводятся позже, используя {rows} в формате jsx. Проблема в том, что результат i++ также попадает в HTML. Я чувствую, что я «думаю» или неправильно подхожу к этому.

Как мне написать это в идиоматическом JSX?

Answer 1

Вы можете просто использовать i ++, куда хотите, внутри фигурных скобок.Ваш объект строки должен быть как:

row = (
      <div className="bpa-module-tile-row">
        {this.getItem(items[i++])}
        {this.getItem(items[i])}
        )
      </div>
    );

Answer 2

Одним из решений является увеличение вашего счетчика на 2 и вычисление каждого индекса соответствующим образом:

const rows = [];

for (let i = 0; i < items.length; i += 2) {
  let row;
  if (i + 1 < items.length) {
    // on all but the last item we have to items in a row
    row = (
      <div className="bpa-module-tile-row">
        {this.getItem(items[i])}
        {this.getItem(items[i+1])}
        )
      </div>
    );
  } else {
    // if we have an odd number of items, then the last row has only one not two items in a rowj
    row = (
      <div className="bpa-module-tile-row">{this.getItem(items[i])}</div>
    );
  }

  rows.push(row);
}

Answer 3

Array.prototype.map () будет перебирать список и создавать другой список, применяя функцию, которую вы ему предоставите.

Что-то похожее на это то, что вы ищете:

const items = [1,2,3,4,5]
const rows = items.map((_, index) => index % 2 ? [] : items.slice(index, index + 2))
  .filter(row => row.length > 0)
  .map(row =>
     (<div className="bpa-module-tile-row">
       {row.map(x => "Item " + x)}
     </div>)
  );

Попробуйте: JS fiddle

---

Если вы можете импортировать (или написать свой собственный ) chunk метод, тогда это станет еще проще:

const rows = chunk(items, size=2)
 .map(row =>
     (<div className="bpa-module-tile-row">
       {row.map(x => "Item " + x)}
     </div>)
  );