如何创建 ReactJS 可缩放图像灯箱答案

【问题标题】：How to create a ReactJS zoomable image lightbox如何创建 ReactJS 可缩放图像灯箱
【发布时间】：2019-08-25 15:05:53
【问题描述】：

我正在 ReactJs 中创建一个图片库。网上有很多例子，但我没有找到任何可以在桌面浏览器上完美响应并且完全适合移动设备的东西。

特别是，当在移动浏览器上打开图片时，我需要能够通过双击放大照片，并在将照片拖到底部时关闭照片

我已经尝试了我在网上找到的所有主要解决方案。例如，我尝试了所有这些https://reactjsexample.com/tag/lightbox/ 还有更多。

我还尝试了不同的方法，例如 CSS 规则、视口规则、创建简单的可缩放 html div 等...但没有任何效果。

基本上，我要实现的完全是这样的：https://www.lucapetruzzi.com/gallery/1

感谢这个库：https://photoswipe.com/，不幸的是我不能在 React 中使用它。（我也尝试过 react-photoswipe 和 react-photoswipe-2 库，但它似乎没有得到维护，并且不适用于新版本的 React）

感谢您的帮助

【问题讨论】：

也许你可以使用raw（不被react包裹） photoswipe，通过写window.onload事件函数handler可以初始化组件？
谢谢 Shiro，老实说我不知道该怎么做。你的意思是把它放在html页面上？这不是反模式吗？
包含指向<head> 的链接，在 React 组件中添加 pswp，并在 window.onload 中初始化...是的，这是一个快速但反模式的解决方案，或者因为您已经尝试过react-photoswipe，你可以自己包起来。
我试过了，但我得到了一堆错误，比如：'define' is not defined'或'Expected an assignment or function call and instead seen an expression'

【解决方案1】：

所以对于以前的cmets，我给你写了一个sn-p，检查here

主要步骤如下：

使用npm install photoswipe，所以不要需要包含已构建的js，但需要在index.html中包含css（或者您可以在App.css中导入）
在js组件中编写标记
点击button或useEffect初始化

【讨论】：