Question

你将如何使用jsx / react组装这个html。我的问题是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);
}

稍后使用jsx中的rows输出{rows}。问题是i++结果也会在html中结束。我觉得我在这里“思考”或以错误的方式接近它。

我如何在惯用的JSX中写这个？

Answer 1

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

如果您可以导入（或write your own）chunk方法，那么这就变得更加简单了：

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

Answer 2

你可以在大括号内随意使用i ++。您的行对象必须如下：

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

Answer 3

一种解决方案是将计数器增加2并根据需要计算每个指数：

stmt

如何在JSX（React）中执行JS而不将其作为HTML输出？

3 个答案: