如何在JSX(React)中执行JS而不将其输出为HTML?

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

一种解决方案是将计数器增加 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 2

您可以在大括号内的任何地方简单地使用 i++。行对象必须类似于：

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

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小提琴

---

如果您可以导入(或编写自己的(块方法，那么这将变得更加简单：

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