我有一个这样的对象:
export const dataEstrenos = [
{
id: 1, product: "any product", title: "any title"
},
{
id: 2, product: "any product", title: "any title"
},
{
id: 3, product: "any product", title: "any title"
},
{
id: 4, product: "any product", title: "any title"
},
{
id: 5, product: "any product", title: "any title"
},
{
id: 6, product: "any product", title: "any title"
},
{
id: 7, product: "any product", title: "any title"
}
];
我想在容器 div 内以四个元素为一组的形式显示项目,如下所示:
<div>
<div>Here data from first item</div>
<div>Here data from second item</div>
<div>Here data from third item</div>
<div>Here data from fourth item</div>
</div>
<div>
<div>Here data from fifth item</div>
<div>Here data from sixth item</div>
<div>Here data from seventh item</div>
</div>
...对象内的项目可以是任意数量,最后一个容器 div 可能没有四个项目,具体取决于数组/对象中剩余的项目数量(如上面的示例)。
我怎样才能在反应中实现这一目标?我是 React 新手,所以我实现这一目标的尝试不值得在这里展示。谢谢!
我首先将数组拆分为子数组。如果您有一个最喜欢的实用程序库,它可能具有此功能,例如 Lodash 的 chunk 或 Ramda 的 splitEvery。或者你可以自己写。
const createChunks = (array, size) => {
const chunks = [];
for (let i = 0; i < array.length; i += size) {
chunks.push(array.slice(i, i + size));
}
return chunks
}
// In your component:
const chunks = createChunks(dataEstrenos, 4);
之后,像这样映射数组:
return (
<>
{chunks.map((chunk) => (
<div>
{chunk.map((item) => (
<div>Here data from item. Eg, {item.title}</div>
))}
</div>
))}
</>
);