我在用着用于 React 的滑动器 https://swiperjs.com/react显示一些幻灯片。
我一直坚持使用外部按钮在幻灯片(上一张和下一张)之间导航。
刷卡器有一个useSwiper
hook https://swiperjs.com/react#use-swiper可以提供对其 Swiper 实例 API 的编程访问。但这不起作用。
这是我的代码:
import { useSwiper } from 'swiper/react';
//more code
const swiper = useSwiper();
//more code
<Swiper
modules={[Navigation, Pagination, Scrollbar, A11y]}
navigation
spaceBetween={20}
slidesPerView={1}
>
<button onClick={() => swiper.slideNext()}>Slide</button>
{
ads.map(ad => <SwiperSlide>
slider explanation
</SwiperSlide>
)}
</Swiper>
当我单击该按钮时,我收到此错误:
类型错误:无法读取 null 的属性(读取“slideNext”)
useSwiper
必须由组件使用inside a Swiper
元素。
所以像下面这样
import { useSwiper } from "swiper/react";
const SwiperButtonNext = ({ children }) => {
const swiper = useSwiper();
return <button onClick={() => swiper.slideNext()}>{children}</button>;
};
然后在里面使用它Swiper
<Swiper
modules={[Navigation, Pagination, Scrollbar, A11y]}
navigation
spaceBetween={20}
slidesPerView={1}
>
<SwiperButtonNext>Slide</SwiperButtonNext>
{ads.map((ad) => (
<SwiperSlide>slider explanation</SwiperSlide>
))}
</Swiper>;
那是因为Swiper
创建一个上下文并且useSwiper
hook 尝试使用该上下文,因此需要从上下文提供者的子级调用它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)