Swiper React如何使用Typescript在悬停时停止和启动自动播放

Question

我正在使用Swiper js进行旋转木马、React和Typescript。

在这篇文章之后，我试图在悬停状态下自动播放stop()和start()。我需要这种方法，因为我必须在悬停Swiper容器时创建一些状态。

1(我的<Swiper ref={swiperRef}>组件上的ref属性出现了一个typescript错误：

类型'IntrinsicAttributes&上不存在属性'ref'；Swiper&｛儿童？

2(我如何获得滑动器的访问权限，以便在handleMouseEnter功能中使用swiper.autoplay.stop();？所以我可以使用类似：

const handleMouseEnter = () => {
swiper.autoplay.stop();
};

或类似：

const handleMouseEnter = () => {
swiperRef.current.swiper.autoplay.stop();
};

这就是我目前所拥有的沙盒。

如何使用Typescript实现此功能？

Answer 1

当您的刷卡器在ref中初始化时，您可以存储它，然后使用它的控制器事件，如下所示：

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Autoplay, Pagination } from "swiper";
SwiperCore.use([Pagination, Autoplay]);
export default function SwiperComponent() {
const swiperRef = React.useRef<SwiperCore>();
const onInit = (Swiper: SwiperCore): void => {
swiperRef.current = Swiper;
};
const handleMouseEnter = () => {
if (swiperRef.current) swiperRef.current.autoplay.start();
};
const handleMouseLeave = () => {
if (swiperRef.current) swiperRef.current.autoplay.stop();
};
return (
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Swiper onInit={onInit}>
<SwiperSlide></SwiperSlide>
</Swiper>
</div>
);
}