AFAIK 你不能有条件地在 array::map 中渲染打开/关闭标签，在 JSX 中映射的每个元素都需要是一个完整的节点。
您可以通过首先将数组拆分为块数组，然后映射外部块数组和内部块数组来实现分组。
将数组分割成长度为 3 的块有 this solution（已关闭但指向 here），尽管这需要在渲染前进行一些“预处理”。
给定一些数据数组[0..15]
const data = [...Array(16).keys()];
您可以复制到一个临时数组中并拼接出 3 个元素的块
const data2 = [...data];
const groupedData1 = [];
while(data2.length) {
groupedData1.push(data2.splice(0, 3));
}
const data = [...Array(16).keys()];
const data2 = [...data];
const groupedData1 = [];
while(data2.length) {
groupedData1.push(data2.splice(0, 3));
}
console.log(groupedData1);
如果您更喜欢 JSX 中常用的功能更强大的内联方法。这里一个array::reduce用于将数据数组缩减为3个块，最终的array::filter用于清除任何结束的空数组（就像块长度除以数据长度的情况一样。
const groupedData2 = data
.reduce((groups, curr) => {
const arr = groups[groups.length - 1];
arr.push(curr);
if (arr.length === 3) groups.push([]);
return groups;
}, [[]])
.filter((chunk) => chunk.length);
const data = [...Array(16).keys()];
const groupedData2 = data
.reduce((groups, curr) => {
const arr = groups[groups.length - 1];
arr.push(curr);
if (arr.length === 3) groups.push([]);
return groups;
}, [[]])
.filter((chunk) => chunk.length);
console.log(groupedData2);
现在渲染分块数组
data.<inlineChunkProcess>.map((group, i) => (
<div key={i}>
{group.map((product, i) => (
<Product key={i} value={product} />
))}
</div>
))
这是一个高级概述，实际上您不希望将数组索引用作反应键。在对数据进行分块/分组时，您需要为 that 组生成一个唯一 ID，并且您希望每个产品都有自己的唯一 ID（希望已经是这种情况）。如果/当您需要从列表中添加或删除任何单个产品时，这将有所帮助。
例子：
const Group = () => ({
id: uuidv4(),
data: []
});
...
{list
.reduce(
(groups, curr) => {
const group = groups[groups.length - 1];
group.data.push(curr);
if (group.data.length === 3) {
groups.push(new Group());
}
return groups;
},
[new Group()]
)
.filter(({ data }) => data.length)
.map(({ data, id }, i) => (
<div key={id} className="myDiv">
Group Id: {id}
<div>
{data.map(({ id, value }, i) => (
<Product key={id} value={value} />
))}
</div>
</div>
))}