タッチ対応ライトボックス機能を[react-slick]に追加するにはどうすればよいですか？

Question

最近、ほとんどの機能を提供するためにjQueryプラグインを使用してサイトを構築した後、Reactに移動しました。画像スライダとライトボックスを作成するには、slick.jsとhalkaBox.jsまたはSimpleLightboxを組み合わせて使用​​しました（これはかなり簡単でした）。

Reactを使用しているので、私はreact-slickが偉大なスライダコンポーネントであることを発見しましたが、タッチ対応のライトボックス機能を追加するにはどうすればよいかわかりません。反応がよく反応するライトボックスのコンポーネントは反応が滑らかなものとペアになっていますか？ react-slickのようなReactコンポーネントにhalkaBox.jsのようなJSプラグインを組み込む適切な方法はありますか？

ガイダンスをいただければ幸いです！

Answer 1

私は反応スリック+反応イメージライトボックスを使用することができますと思います。ローカル状態は、現在のイメージのパスを保存するのに適しています。

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, index) => (
      <img src="image" onClick={ e => this.handleClickImage(e, image)} /> 

     ))} 
     </Slider> 

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