如何使用 React 钩子初始化 Swiper? [英] How to initialize Swiper using React hooks?

问题描述

我正在使用 React 钩子和 Swiper(SwiperJS Link)库.但是，在初始化时出错.任何人都可以帮忙吗?我试过这样 -

 让 mySwiper;useEffect(() => {mySwiper = new Swiper('.swiper-container', {循环:真实，每视图幻灯片:'2'，centerSlides: 真,分页:{el: '.swiper-分页',可点击:真实，},});})

但是，React 给了我这个警告并且没有正确初始化滑块.警告-

<块引用>

从 React Hook useEffect 内部对 'mySwiper' 变量的赋值将在每次渲染后丢失.要随着时间的推移保留该值，请将其存储在 useRef Hook 中，并将可变值保留在 '.current' 属性中.否则，您可以直接在 useEffect 中移动此变量.

最后，我的模板-

<div className="swiper-wrapper">{place.map((item, index) => (<div key={index} className="swiper-slide"onTouchStart={() =>{ onPlaceSelect(index) }}onTouchCancel={() =>{ onPlaceSelect(index) }}><包className="swiper-slide"键={索引}背景图片={背景}模型图像={模型}title="传统学习"价格=15"ref={myRef.current[index]}/></div>))}

那么，使用 React 钩子初始化它的正确方法是什么?

解决方案

您的 useEffect 将在每次渲染中运行，每次创建新的 Swiper 实例.尝试将 swiper 实例存储在 state 中，并且只运行一次 useEffect.

let [mySwiper, setMySwiper] = useState(null)useEffect(() => {让 mySwiper = new Swiper('.swiper-container', {循环:真实，每视图幻灯片:'2'，centerSlides: 真,分页:{el: '.swiper-分页',可点击:真实，},});setMySwiper(mySwiper)}, [])

[] 作为 useEffect 的第二个参数确保效果只运行一次，即在组件安装期间.

I am using React hooks and Swiper (SwiperJS Link) library. But, getting an error on initializing it. Can anyone help? I tried like this-

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

But, React is giving me this warning and not initializing the slider correctly. The warning-

Assignments to the 'mySwiper' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.

And, at last, my template-

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

So, what is the correct way to initilize it using React hooks?

解决方案

Your useEffect will run in every render, each time creating new Swiper instance. Try storing swiper instance in state and run useEffect only once.

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) 
}, [])

[] as the second param for useEffect makes sure, the effect is run only once, ie during component mount.

这篇关于如何使用 React 钩子初始化 Swiper?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！