如何在React中使用Simple React Lightbox实现点击图片弹出灯箱效果

核心错误点 #

• SRLWrapper 仅包裹了第一个图片卡片，其余5个图片链接都在组件作用域之外，插件无法识别这些未被包裹的元素
• 遗漏了根组件的Provider配置，这是插件正常运行的必填前置步骤

修复步骤 #

步骤1：配置根组件Provider #

在项目根组件（通常为App.js/App.jsx）中添加全局Provider配置，不同版本引入方式略有差异：

• v2版本：

import SimpleReactLightbox from 'simple-react-lightbox'

function App() {
  return (
    <SimpleReactLightbox>
      {/* 原有根组件全部内容，包含路由、Projects组件等 */}
    </SimpleReactLightbox>
  )
}
export default App

• v3及以上版本：

import { SRLProvider } from 'simple-react-lightbox'

function App() {
  return (
    <SRLProvider>
      {/* 原有根组件全部内容，包含路由、Projects组件等 */}
    </SRLProvider>
  )
}
export default App

步骤2：调整SRLWrapper包裹范围 #

把所有需要触发灯箱的图片卡片全部放入SRLWrapper内部，调整后的Projects组件代码如下：

import logo from './movieBrowser.jpg';
import logo2 from './portfolio-2.jpg';
import logo3 from './portfolio-3.jpg';
import logo4 from './portfolio-4.jpg';
import { SRLWrapper } from "simple-react-lightbox";

const Projects = () =>{
return(
  <div id="project">
      <div className="container-fluid p-2 mb-0 ">
          <div className="row g-0 m-4">
          <SRLWrapper>
              <div className="col-lg-4 col-sm-6 p-1">
                  <a className="portfolio-box"  href={logo3} title="Project Name">
                      <img className="img-fluid" src={logo3} alt="project name" />
                      <div className="portfolio-box-caption">
                          <div className="project-category text-white-50">Category</div>
                          <div className="project-name">Project Name</div>
                      </div>
                  </a>
              </div>
              <div className="col-lg-4 col-sm-6 p-1">
                  <a className="portfolio-box" href={logo4} title="Project Name">
                      <img className="img-fluid" src={logo4} alt="..." />
                      <div className="portfolio-box-caption">
                          <div className="project-category text-white-50">Category</div>
                          <div className="project-name">Project Name</div>
                      </div>
                  </a>
              </div>
              <div className="col-lg-4 col-sm-6 p-1">
                  <a className="portfolio-box"  href={logo2} title="Project Name">
                      <img className="img-fluid" src={logo2} alt="..." />
                      <div className="portfolio-box-caption">
                          <div className="project-category text-white-50">Category</div>
                          <div className="project-name">Project Name</div>
                      </div>
                  </a>
              </div>
              <div className="col-lg-4 col-sm-6 p-1">
                  <a className="portfolio-box"  href={logo} title="Project Name">
                      <img className="img-fluid" src={logo} alt="..." />
                      <div className="portfolio-box-caption">
                          <div className="project-category text-white-50">Category</div>
                          <div className="project-name">Project Name</div>
                      </div>
                  </a>
              </div>
              <div className="col-lg-4 col-sm-6 p-1">
                  <a className="portfolio-box" href={logo4} title="Project Name">
                      <img className="img-fluid" src={logo4} alt="..." />
                      <div className="portfolio-box-caption">
                          <div className="project-category text-white-50">Category</div>
                          <div className="project-name">Project Name</div>
                      </div>
                  </a>
              </div>
              <div className="col-lg-4 col-sm-6 p-1">
                  <a className="portfolio-box"  href={logo3} title="Project Name">
                      <img className="img-fluid" src={logo3} alt="..." />
                      <div className="portfolio-box-caption p-3">
                          <div className="project-category text-white-50">Category</div>
                          <div className="project-name">Project Name</div>
                      </div>
                  </a>
              </div>
            </SRLWrapper>
          </div>
      </div>
  </div>
)
}
export default Projects;

额外排查项 #

如果修改完成后点击图片仍然跳转页面而非弹出灯箱，可给所有触发灯箱的a标签添加data-attribute="SRL"属性，强制插件识别对应元素。

内容的提问来源于stack exchange，提问作者tinaa