[英]How to call array data on button onclick using map method in React JS
[英]How to print array data using map method in React JS?
你好社区我被困在某个时候我是 React JS 的新手。 我想使用 map function 调用图像文件。 只有图像不会出现在网页上。
这是我的 Array.jsx 文件
const PhotoData = [
{
imgsrc: gallery_1
},
{
imgsrc: gallery_4
},
{
imgsrc: gallery_7
},
{
imgsrc: gallery_10
}
]
const PhotoData1 = [
{
imgsrc: gallery_2
},
{
imgsrc: gallery_6
},
{
imgsrc: gallery_8
},
{
imgsrc: gallery_12
}
]
const PhotoData2 = [
{
imgsrc: gallery_3
},
{
imgsrc: gallery_5
},
{
imgsrc: gallery_9
},
{
imgsrc: gallery_11
}
]
export default [PhotoData,PhotoData1,PhotoData2];
还可以在代码上方导入画廊图像。
这是我编写代码的 photos.jsx 文件。
<div className='photo__header-grid'>
<div className='grid-item'>
{
PhotoData.map((val,index)=>{
return(
<div className='gallery-item' key={index}>
<img src={val.imgsrc} alt="gallery_1"/>
</div>
)
})
}
</div>
</div>
<div className='photo__header-grid-1'>
<div className='grid-item'>
{
PhotoData1.map((val,index)=>{
return(
<div className='gallery-item' key={index}>
<img src={val.imgsrc} alt="gallery_1"/>
</div>
)
})
}
</div>
</div>
<div className='photo__header-grid-2'>
<div className='grid-item'>
{
PhotoData2.map((val,index)=>{
return(
<div className='gallery-item' key={index}>
<img src={val.imgsrc} alt="gallery_1"/>
</div>
)
})
}
</div>
</div>
图片不会出现在网页上。 提前致谢。
我不明白图像是本地的还是链接的,但如果它们是本地的,请尝试使用src={require(val.imgsrc)}
,如此处所述
将此添加到Array.jsx
文件
const PhotoData = [ { imgsrc: gallery_1 }, { imgsrc: gallery_4 }, { imgsrc: gallery_7 }, { imgsrc: gallery_10 } ]; const PhotoData1 = [ { imgsrc: gallery_2 }, { imgsrc: gallery_6 }, { imgsrc: gallery_8 }, { imgsrc: gallery_12 } ]; const PhotoData2 = [ { imgsrc: gallery_3 }, { imgsrc: gallery_5 }, { imgsrc: gallery_9 }, { imgsrc: gallery_11 } ]; export default { PhotoData, PhotoData1, PhotoData2 };
然后将其导入到photos.jsx
文件中
import { FC } from 'react'; import { PhotoData, PhotoData1, PhotoData2 } from './Array.jsx'; // location of the array.jsx file const Photos: FC = () => { return ( <> <div className="photo__header-grid"> <div className="grid-item"> {PhotoData.map((val, index) => { return ( <div className="gallery-item" key="{index}"> <img src={val.imgsrc} alt="gallery_1" /> </div> ); })} </div> </div> <div className="photo__header-grid-1"> <div className="grid-item"> {PhotoData1.map((val, index) => { return ( <div className="gallery-item" key="{index}"> <img src={val.imgsrc} alt="gallery_1" /> </div> ); })} </div> </div> <div className="photo__header-grid-2"> <div className="grid-item"> {PhotoData2.map((val, index) => { return ( <div className="gallery-item" key="{index}"> <img src={val.imgsrc} alt="gallery_1" /> </div> ); })} </div> </div> </> ); }; export default Photos;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.