[英]Render Group of Cards in Next.js
I'm trying to figure out how to create a function that renders a group of cards in next.js (using the react semantic ui).我试图弄清楚如何在 next.js 中创建一个呈现一组卡片的函数(使用反应语义 ui)。 I mean, I have 50 photos and I want to create without having to manually enter all 50 cards, a function that generates this group for me.
我的意思是,我有 50 张照片,我想创建而不必手动输入所有 50 张卡片,这是为我生成这个组的功能。 To do this I would simply need an index as my intention would be to pass as the src of the image "/src/image/"+index+"/.png"
为此,我只需要一个索引,因为我的意图是作为图像的 src 传递“/src/image/”+index+”/.png”
I'm not very familiar with semantic ui and next.js but I can do a little something.我对语义 ui 和 next.js 不是很熟悉,但我可以做一些事情。 I leave you the code I wrote, which works even if I think there are faster and more beautiful solutions ... the only problem is that the first index returned is the maximum, that is 50 and then the 1 ... why?
我把我写的代码留给你,即使我认为有更快更漂亮的解决方案也能工作……唯一的问题是返回的第一个索引是最大值,即 50,然后是 1……为什么?
renderCard() {
const index = [50];
let i;
for(i = 1; i<49;i++) index[i]=i
const items = index.map(index => {
return {
image: "/src/image/"+index+".png",
header: i
};
});
return <Card.Group itemsPerRow={3} items={items}/>
}
Comments inline.内联评论。
renderCard() {
const index = [50]; //This creates an array of one element
// index[0] === 50
let i;
for(i = 1; i<49;i++) { //array indexes start at 0, not 1
index[i]=i //This adds numbers 1-49 to the end of array
}
//after this loop,
//index === [50,1,2,...,48]
Try one of the solutions listed here to initialize your array.尝试此处列出的解决方案之一来初始化您的阵列。
eg例如
const index = Array.from(Array(50).keys());
//index === [0,1,2,...,49];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.