如何向 [react-slick] 添加支持触摸的灯箱功能？

Posted 2023-02-25

【中文标题】如何向 [react-slick] 添加支持触摸的灯箱功能？

【英文标题】：How to add touch-enabled lightbox features to [react-slick]?

【发布时间】：2017-10-28 15:04:42

【问题描述】：

在构建了使用 jQuery 插件提供大部分功能的网站之后，我最近转向了 React。为了创建图像滑块 + 灯箱，我曾经将 slick.js 与 halkaBox.js 或 SimpleLightbox 组合在一起（这很容易）。

现在我正在使用 React，我发现 react-slick 是一个很棒的滑块组件，但我不确定如何最好地向它添加支持触摸的灯箱功能。是否有一个支持触摸的 React 灯箱组件与 react-slick 搭配得很好？有没有合适的方法将像 halkaBox.js 这样的 JS 插件与像 react-slick 这样的 React 组件结合起来？

任何指导将不胜感激！

【问题讨论】：

我刚刚检查了 click-react 演示页面 - 它可以用手指滑动。你能解释一下touch-enabled lightbox 代表什么吗？

是的，react-slick 滑块支持触控，这很棒（不确定 click-react 是什么...）。灯箱意味着能够点击图像并使其弹出全屏图像滑块。有关我的意思的示例，请参阅 halkaBox 和 SimpleLightbox 链接。

【参考方案1】：

我认为，您可以使用 react-slick + react-image-lightbox。本地状态是保存当前图像路径的好地方；

import Slider from 'react-slick';
import Lightbox from 'react-image-lightbox';

class Slider extends React.Component
  constructor(props)
    super(props);

    this.state = 
      images: ['src/image1.png', 'src/image2.png', 'src/image3.png'],
      current: ''
    
  

  getSliderSettings()
   return 
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
   
  

  handleClickImage = (e, image) => 
   e && e.preventDefault();

   this.setState(
     current: image
   )
  

  handleCloseModal = (e) => 
   e && e.preventDefault();

   this.setState(
     current: ''
   )
  

  render()
   const settings = this.getSliderSettings();
   const  images, current  = this.state;

   return (
     <div>
      <Slider ...settings>
         images.map(image => (
           <img src=image onClick= e => this.handleClickImage(e, image)  />

        )) 
      </Slider>

      current &&
         <Lightbox
            mainSrc=current
            onCloseRequest=this.handleCloseModal
            />
      
    </div>
   )
  

【讨论】：

这很聪明！非常感谢这个解决方案。只有一件事：为了工作， 需要重写为 。