ReactJS地图功能在灯箱画廊上不起作用

如何解决ReactJS地图功能在灯箱画廊上不起作用

这是我第一次在react上使用map（）函数，并且试图在由JQuery（CDN）制成的灯箱图像库中使用它。

它可以完美运行并打开没有地图的灯箱（仅一张图像），如以下代码所示：

<li
className="col-xs-6 col-sm-4 col-md-4 col-lg-3"
data-src={data[0]?.img}
data-sub-html={`<h4>${data[0]?.title}</h4><p>${data[0]?.desc}</p>`}
>
    <a style={{ cursor: 'pointer' }}>
        <img className="img-responsive" src={data[0]?.img} alt="Thumb-1" />
    </a>
</li>

但是使用map（）可以显示图像（因此我认为数据已发送），但是单击时不会弹出灯箱。

{data.map((item,i)=>(
<li
key={i++}
className="col-xs-6 col-sm-4 col-md-4 col-lg-3"
data-src={item.img}
data-sub-html={`<h4>${item.title}</h4><p>${item.desc}</p>`}
>
    <a style={{ cursor: 'pointer' }}>
        <img className="img-responsive" src={item.img} alt="Thumb-1" />
    </a>
</li> ))}

此处为完整部分：https://www.codepile.net/pile/q8526QDd

有人可以帮助我解决此问题吗？，这是我第一次在stackoverflow中提出问题。

解决方法

尝试这种方法，

<ul>
      {
        data.map((item)=>(
          <li
          className="col-xs-6 col-sm-4 col-md-4 col-lg-3"
          data-src={item?.img}
          data-sub-html={`<h4>${item?.title}</h4><p>${item?.desc}</p>`}
          >
            <a style={{ cursor: 'pointer' }}>
             <img className="img-responsive" src={item?.img} alt="Thumb-1" />
           </a>
          </li> ))
        }
  </ul>