时间戳

首页 > 解决方案 > 使用 swiperjs react 更新 swiper 效果

reactjs - 使用 swiperjs react 更新 swiper 效果

问题描述

我正在寻找一种方法来更新刷卡器的效果（以及其他一些设置）。我发现我们必须swiper.destroy(true, true)再次初始化刷卡器（从这里和这里）。像这里一样初始化刷卡器

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

Swiper is not a constructor我从导入的 Swiper 中假设的返回错误来自“swiper/react”，而不仅仅是来自“swiper”。任何想法如何解决这一问题？或任何其他方法？

谢谢！

标签： reactjsswiperswiperjs

解决方案

您必须导入 Swiper，我建议您将其存储在 ref 中，这样您就不会在每次渲染时不断创建新的 Swiper 实例，您可以执行以下操作：

import Swiper from 'swiper';

const MyComponent = () => {
 const swiperRef = useRef(null);

 useEffect(() => {
    swiperRef.current = new Swiper(
        '.swiper-container', // You can also use a ref to the element here
        {
          loop: true,
          slidesPerView: '2',
          centeredSlides: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        },
    );

    return () => {
      swiperRef.current.destroy(true, true);
    };
  }, []);

  return (
    ...
  )
}

您现在可以使用 swiper 访问swiperRef.current

推荐阅读