Javascript 嵌套图像数组无法加载

我对react和javascript比较陌生（我通常是后端Java）。我目前正在尝试制作一个图像库，在其中单击子部分并显示每个部分中图像的缩略图。然后可以点击缩略图并打开一个灯箱（我正在利用它，我使用的是最新版本）

它起作用了，但前后不一致。有时，当我点击缩略图时，它不是扔掉灯箱并能够点击图像，而是直接将我带到全尺寸图像

我的图像数据嵌套数组（省略图像导入）

我一直在努力让js持续工作

import React from 'react';
import '../css/gallery.css';
import '../css/jewelry_main.css';
import GALLERIES from '../data/galleries';
import SimpleReactLightbox from "simple-react-lightbox"; 
import { SRLWrapper } from "simple-react-lightbox";
import {Link } from 'react-router-dom';

const Gallery = props =>{
    const{thumbnail, url, title } = props.subgallery;
    return(
        <div className="gallery">
            <a href={url} data-attribute="SRL">
            <img src={thumbnail} alt={title} />
            </a>
        </div>
    )
}

const JewelryGallery = ({match}) =>{
const gallery = GALLERIES.find(({ id }) => id === match.params.keyword)
    return(
        <div>
        <div className="frosted">
        <p>{gallery.description}</p>
        </div>
        <SimpleReactLightbox>
            <SRLWrapper>
            {
                gallery.resources.map((SUBGALLERY) =>{
                    return(
                        <Gallery key = {SUBGALLERY.id} subgallery={SUBGALLERY} />
                    )
                })
            }
            </SRLWrapper>
            </SimpleReactLightbox>
       </div>
    );

}

export default JewelryGallery;

从“React”导入React；
导入“../css/gallery.css”；
导入“../css/jewelry_main.css”；
从“../data/GALLERIES”导入库；
从“simple react lightbox”导入SimpleReactLightbox；
从“simple react lightbox”导入{srlwraper}；
从'react router dom'导入{Link}；
康斯特画廊=道具=>{
const{缩略图，url，title}=props.subgallery；
返回(
)
}
康斯特珠宝画廊=（{match}）=>{
const gallery=gallers.find（（{id}）=>id==match.params.keyword）
返回(
{gallery.description}

{
gallery.resources.map（（子gallery）=>{
返回(
)
})
}
);
}
导出默认珠宝库；

任何见解或智慧都将不胜感激！谢谢大家!

---

更新编辑：我注意到，我点击的第一个子库将始终显示lightbox，但第二个子库始终失败，而是直接显示我点击的任何图像的完整大小。（我先选择哪一个并不重要，第二个总是失败的。）但我不明白为什么lightbox不会应用到我选择的第二个库。

我只能看到两件事与

simple react lightbox

包的文档不同

首先，对于最新版本，您只需要使用

组件。您同时使用了

和

组件。如果您安装了软件包的最新版本，也许可以尝试摆脱旧版本

第二件事是

Gallery

组件返回的结构包含

div

包装元素。我不确定这是否会导致任何问题，但是，为了尽可能接近文档中的示例，您可以尝试使用片段而不是

div

    const{thumbnail, url, title } = props.subgallery;
    return(
        <>
            <a href={url} data-attribute="SRL">
            <img src={thumbnail} alt={title} />
            </a>
        </>
    )

---

这是从他们的例子中得出的。我会仔细看看那里，看看他们是否有你想要的确切设置。还请注意，他们也在使用引导样式框架，因此为了使这些样式正常工作，您需要将引导安装到您的依赖项中。

谢谢您的建议！我尝试过删除

并使用一个片段（彼此独立并串联），不幸的是两者都不起作用。删除

导致整个页面无法加载，使用片段仍然导致lightbox无法触发，并将我直接带到图像。我再次查看了文档，并对答案进行了编辑。我想我错过了一些东西。如果你想浏览一下编辑，看看他们在文档中提供的代码沙盒，希望它能帮你找到需要的地方。啊，好吧，我从来没能让沙盒代码为我加载过！我试试看，然后再给你回复！再次感谢您抽出时间来帮忙！不幸的是没有骰子。但我注意到了一些奇怪的事情，我选择的第一个子画廊总是与灯箱一起出现。第二个子库总是无法显示灯箱，而是直接进入完整图像。不管我先做哪一个或第二个，行为都是一样的。

    const{thumbnail, url, title } = props.subgallery;
    return(
        <>
            <a href={url} data-attribute="SRL">
            <img src={thumbnail} alt={title} />
            </a>
        </>
    )

          <SimpleReactLightbox>
            <SRLWrapper>
            <div id="content-page-one" className="container content">
            <div className="row">
            {
                gallery.resources.map((SUBGALLERY) =>{
                    return(
                        <Gallery key = {SUBGALLERY.id} subgallery={SUBGALLERY} />
                    )
                })
            }
            </div>
            </div>
            </SRLWrapper>
          </SimpleReactLightbox>

<div className="col-md-6 col-12 col-image-half">
  <img src={thumbnail} alt={title} />
</div>