ReactJS:映射图像数组，每个图像都有唯一的弹出窗口
ReactJS:映射图像数组，每个图像都有唯一的弹出窗口
提问于 2019-10-18 00:13:17
我是一个新的反应&真的被困在如何创建一个弹出式窗口，这是独特的每个图像。
我有20个图像，所有这些都需要用一个独特的弹出窗口(只有一次打开弹出窗口)可点击。
我正在从一个数组中映射出图像。有没有人能帮我为每个图像创建一个弹出窗口？弹出窗口必须包含文本和图像。
<div className={divStyle}>
{finalBoxArray.map(gooseberry => (
<Img
key={allPlaces.infoid}
className={gooseberryStyle}
alt="gooseberry"
fixed={about.fixed}
style={{
top: gooseberry.top,
left: gooseberry.left
}}
/>
))}
array is as below:
const allPlaces = [
{
infoid: 'box1',
top: '145px',
left: '935px',
found: false,
},
{
infoid: 'box2',
top: '120px',
left: '980px',
found: false
},
{
infoid: 'box3',
top: '560px',
left: '450px',
found: false
},
{
infoid: 'box4',
top: '380px',
left: '760px',
found: false
},
{
infoid: 'box5',
top: '460px',
left: '600px',
found: false
},
]
回答 1
Stack Overflow用户
发布于 2019-10-18 01:51:38
你的代码不是很完整，对我来说也不是很清楚。但据我所知，您正在尝试创建一系列具有不同风格的图像。如果是这样，那么您需要创建一个数组来实际保存图像，并将图像元素映射到allPlaces数组。这是一段编辑：
/* I'm not quite sure if you have a custom
* Img element you created because you wrote it like
* <Img/> instead of <img/>
*/
const imgArray = allPlaces.map((obj) => {
<img
key={obj.infoid}
className={gooseberryStyle}
alt="gooseberry"
fixed={obj.fixed}
style={{
top: obj.top,
left: obj.left
}} />
});
//add the array to the div container and render
<div className={divStyle} >
{imgArray}
</div>
array is as below:
const allPlaces = [
{
infoid: 'box1',
top: '145px',
left: '935px',
found: false,
},
{
infoid: 'box2',
top: '120px',
left: '980px',
found: false
},
{
infoid: 'box3',
top: '560px',
left: '450px',
found: false
},]
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58436846
复制相关文章
相似问题
腾讯云开发者
