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

Question

我正在将Swiper js用于我的轮播、React 和 Typescript。

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

1）ref我的组件上的属性出现打字稿错误<Swiper ref={swiperRef}>：

类型“IntrinsicAttributes & Swiper & {children?”上不存在属性“ref”？

2）如何访问swiper，以便我可以swiper.autoplay.stop();在我的函数内部使用handleMouseEnter？所以我可以这样使用：

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

或类似：

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

这是我到目前为止所拥有的沙箱。

我如何使用 Typescript 让它工作？

Answer 1

您可以在 ref 中初始化时存储您的 swiper，然后使用其controllerEvents，如下所示：

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>
  );
}