reactjs - 如何使用 React 钩子初始化 Swiper?
问题描述
我正在使用 React 钩子和 Swiper ( SwiperJS Link ) 库。但是,初始化时出错。任何人都可以帮忙吗?我试过这样-
let mySwiper;
useEffect(() => {
mySwiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: '2',
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
})
但是,React 给了我这个警告并且没有正确初始化滑块。警告——
从 React Hook useEffect 内部对“mySwiper”变量的赋值将在每次渲染后丢失。要随着时间的推移保留该值,请将其存储在 useRef Hook 中并将可变值保留在“.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 钩子初始化它的正确方法是什么?
解决方案
您的 useEffect 将在每次渲染中运行,每次创建新的 Swiper 实例。尝试将 swiper 实例存储在 state 中并仅运行一次 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 的第二个参数确保效果只运行一次,即在组件安装期间。
推荐阅读
- linux - yarn logs + blk_xxxxxx_xxxxxx 不存在或不在建设中
- css - 如何更改 matinput 占位符的颜色?
- python - 将网络邮件下载到 Python 时如何进行身份验证?
- python-3.x - ModuleNotFoundError: No module named 'selenium' You are using pip version 9.0.1, 但是版本 19.3.1 is available error using selenium using Python
- audio - 合并具有不同编解码器的音频文件
- javascript - 如何使用 vuejs 发出警报声
- python - Django 自定义命令不适用于 args
- awk - 如何使用 awk 将字段从十六进制转换为十进制
- reactjs - 我收到此错误请帮助无法读取未定义的属性“地图”
- html - autocomplete="username" 在 iOS 中不起作用