我目前正在我的投資組合網站上作業，我需要設定我的資料結構。所以，我有許多“專案”，包括：標題、描述和每個專案的一些影像。
我的資料現在的樣子：
import img1 from './img/1.jpg';
import img2 from './img/2.jpg';
import img3 from './img/3.jpg';
const allData = [
{
id:1,
image: img1,
title: 'Title 1',
},
{
id:2,
image: img2,
title: 'Title 2',
},
{
id:3,
image: img3,
title: 'Title 3',
},
];
export default allData
此外，我正在映射此陣列以顯示 Accordion 中的每個專案，這作業正常，但當我在專案中需要的不僅僅是影像時，我不知道如何設定我的代碼。
所以我想我可能還需要映射陣列中的每個物件？請問有人可以幫我嗎？
<div className="projects">
<div className="section-title">Projects</div>
{allData.map((project) => (
<Project text={project.title} src={project.image} description={project.info}/>
))}
</div>
uj5u.com熱心網友回復：
首先，您需要將影像作為 Array 發送，
const allData = [
{
id:3,
images: [img1, img2, img3],
title: 'Title 3',
},
{
id:3,
images: [img1, img2],
title: 'Title 3',
},
]
并將資料發送到專案組件
<Project text={project.title} imgs={project.images} description={project.info}/>
然后在您的專案組件中，您需要為影像屬性制作一個新地圖
const Project = ({ text, imgs, description }) => {
return <div>
<h5>{description}</h5>
{ imgs.map(e => (<img
src={e}
alt={description}
/>)) }
<p>{text}</p>
</div>;
};
uj5u.com熱心網友回復：
只需將您的影像屬性轉換為陣列即可。
const allData = [
{
id:1,
images: [img1, img4],
title: 'Title 1',
},
{
id:2,
images: [img2, img5],
title: 'Title 2',
},
{
id:3,
images: [img3],
title: 'Title 3',
},
];
export default allData
并映射影像
<div className="projects">
<div className="section-title">Projects</div>
{allData.map((project) => project.images.map(image =>(
<Project text={project.title} src={image} description={project.info}/>
)))}
</div>
如果您需要更多解釋，請告訴我
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/421938.html
標籤：
下一篇：按鈕作業正常，但僅在第二次單擊時