[반응 슬릭]에 터치 가능 라이트 박스 기능을 추가하는 방법은 무엇입니까?

Question

최근에 jQuery 플러그인을 사용하여 대부분의 기능을 제공하는 사이트를 만든 후 React로 이동했습니다. 이미지 슬라이더 + 라이트 박스를 만들려면 slick.js을 halkaBox.js 또는 SimpleLightbox (매우 쉽습니다)과 결합하는 데 사용했습니다.

React를 사용 했으므로 react-slick이 훌륭한 슬라이더 구성 요소라는 것을 알았지 만 터치 지원 라이트 박스 기능을 추가하는 것이 가장 좋지 않습니다. 반응이 좋고 반응이 좋은 터치 라이트 라이트 박스 구성 요소가 있습니까? 적절한 방법으로 halkaBox.js 같은 JS 플러그인을 react-slick과 같은 React 구성 요소와 통합 할 수 있습니까?

모든 안내를 받으실 수 있습니다!

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