ReactJS: сопоставить массив изображений с уникальными всплывающими окнами для каждого изображения - PullRequest
Новая
       9

ReactJS: сопоставить массив изображений с уникальными всплывающими окнами для каждого изображения

0 голосов
/ 17 октября 2019

Я новичок в 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
  },
  ]

1 Ответ

0 голосов
/ 17 октября 2019

ваш код не совсем полный и не очень понятный для меня. Но из того, что я понимаю, вы пытаетесь создать массив изображений с разными стилями. Если это так, то вам нужно создать массив для хранения ваших изображений и сопоставить элемент изображения с вашим массивом 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
},]
...