Как инициализировать Swiper с помощью перехватчиков React? - PullRequest
Новая
       17

Как инициализировать Swiper с помощью перехватчиков React?

0 голосов
/ 24 февраля 2020

Я использую React-хуки и библиотеку Swiper ( Swiper JS Link ). Но, получая ошибку при инициализации. Кто-нибудь может помочь? Я пытался так - 

    let mySwiper; 
    useEffect(() => {
    mySwiper = new Swiper('.swiper-container', {
        loop: true,
        slidesPerView: '2',
        centeredSlides: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
})

Но React выдает мне это предупреждение и неправильно инициализирует ползунок. Предупреждение-

Назначения переменной 'mySwiper' изнутри React Hook useEffect будет потеряно после каждого рендера. Чтобы сохранить значение во времени, сохраните его в хуке useRef и сохраните изменяемое значение в свойстве .current. В противном случае вы можете переместить эту переменную непосредственно в useEffect.

И, наконец, мой шаблон - 

<div className="swiper-container">
   <div className="swiper-wrapper">
      {
         places.map((item, index) => (
          <div key={index} className="swiper-slide"
            onTouchStart={() => { onPlaceSelect(index) }}
            onTouchCancel={() => { onPlaceSelect(index) }}>
              <Package
                 className="swiper-slide"
                 key={index}
                 backgroundImage={Background}
                 modelImage={Model}
                 title="Learn  traditionally"
                 price="15"
                 ref={myRef.current[index]} />
          </div>))}
   </div>
</div>

Итак, как правильно его инициализировать? используя React-хуки?

1 Ответ

1 голос
/ 24 февраля 2020

Ваш useEffect будет запускаться при каждом рендеринге, каждый раз создавая новый экземпляр Swiper. Попробуйте сохранить экземпляр swiper в состоянии и запустите useEffect только один раз. 

let [mySwiper, setMySwiper] = useState(null) 
useEffect(() => {
  let mySwiper = new Swiper('.swiper-container', {
     loop: true,
     slidesPerView: '2',
     centeredSlides: true,
     pagination: {
        el: '.swiper-pagination',
        clickable: true,
     },
  });
  setMySwiper(mySwiper) 
}, [])

[], поскольку второй параметр для useEffect гарантирует, что эффект запускается только один раз, ie во время монтирования компонента.

...