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

Question

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

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

任何指导将不胜感激！

Answer 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>
   )
  }
}