英文:
React .map creating another container for images
问题
我有一个使用display: flex的地图，其中包含一些图片，以及一个Firebase存储，我可以上传图片，上传的图片会显示在该flex画廊中，但该画廊中不应该超过6张图片。当上传超过6张图片时，应该创建另一个容器，新图片放在其中。这些图片被保存在状态中，以下是代码：
// 这是容器的样式.container {display: flex;justify-content: center;align-items: center;margin: 10vmin;overflow: hidden;transform: skew(5deg);}// 这是地图<div className="grid grid-rows-3 bg-black"><div className={styles.container}>{imageList.map((url) => {return (<div className={styles.card}><img src={url} /></div>);})}</div></div>
我需要让这个地图在一个容器中有6张图片后，自动创建下一行的新容器。
谢谢你的帮助。
英文:
I have a map with display flex with some images and a firebase storage where I can upload a pic, and the pic gets shown in that flex gallery, but there should not be more than 6 in that gallery, and when more than 6 pictures are uploaded, another container should be made where the new pics get placed, the images are held in a state,the code is here
//This is the container styles.container {display: flex;justify-content: center;align-items: center;margin: 10vmin;overflow: hidden;transform: skew(5deg);// This is the map<div className=" grid grid-rows-3 bg-black"><div className={styles.container}>{imageList.map((url) => {return (<div className={styles.card}><img src={url} /></div>);})}</div>// This is the
I need to make that map somehow know that once a container gets to 6 pictures, it should make another one in the row below,
Thank you for helping
答案1
得分: 1
以下是您要的翻译部分：
"You could try using the Array.prototype.slice() method to separate the image list into two arrays and then render them with two separate maps.
const imageListLength = imageList.length;
let imageListTop, imageListBottom;
// Split image list into two arrays
if (imageListLength > 6) {
imageListTop = imageList.slice(0, 6);
imageListBottom = imageList.slice(6);
} else {
imageListTop = imageList;
imageListBottom = [];
}
return (
return (
);
})}
{imageListBottom.length > 0 && (
return (
);
})}
)}
);"
EDIT Taking your answer:
"您可以尝试使用Array.prototype.slice()方法将图像列表分成两个数组，然后使用两个单独的映射来呈现它们。
const imageListLength = imageList.length;
let imageListTop, imageListBottom;
if (imageListLength > 6) {
imageListTop = imageList.slice(0, 6);
imageListBottom = imageList.slice(6);
} else {
imageListTop = imageList;
imageListBottom = [];
}
return (
{imageList.map((url, index) => {
if (index % 6 === 0) {
return (
return (
);
})}
);
}
})}
);"
英文:
You could try using the Array.prototype.slice() method to separate the image list into two arrays and then render them with two separate maps.
const imageListLength = imageList.length;let imageListTop, imageListBottom;// Split image list into two arraysif (imageListLength > 6) {imageListTop = imageList.slice(0, 6);imageListBottom = imageList.slice(6);} else {imageListTop = imageList;imageListBottom = [];}return (<div className="grid grid-rows-3 bg-black"><div className={styles.container}>{imageListTop.map((url) => {return (<div className={styles.card}><img src={url} /></div>);})}</div>{imageListBottom.length > 0 && (<div className={styles.container}>{imageListBottom.map((url) => {return (<div className={styles.card}><img src={url} /></div>);})}</div>)}</div>);
EDIT Taking your answer:
You could expand on your code by adding a loop to the code that renders the images. This loop would check the length of the image list and render the images in groups of 6 until the list is exhausted.
const imageListLength = imageList.length;let imageListTop, imageListBottom;if (imageListLength > 6) {imageListTop = imageList.slice(0, 6);imageListBottom = imageList.slice(6);} else {imageListTop = imageList;imageListBottom = [];}return (<div className="grid grid-rows-3 bg-black">{/* Loop through the image list */}{imageList.map((url, index) => {if (index % 6 === 0) {return (<div className={styles.container}>{imageList.slice(index, index + 6).map((url) => {return (<div className={styles.card}><img src={url} /></div>);})}</div>);}})}</div>);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论