Question

我是React的新手，并且真正地专注于如何创建每个图像唯一的弹出窗口。

我有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
  },
  ]

Answer 1

您的代码不是很完整，对我来说也不是很清楚。但是据我了解，您正在尝试创建一系列具有不同样式的图像。如果是这样，那么您需要创建一个数组来实际保存图像并将图像元素映射到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
},]

ReactJS：映射图像数组，每个图像具有唯一的弹出窗口

1 个答案: