Question

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

2021-06-06

3487

reactjs typescript swiper.js

我正在使用 Swiper js 作为我的轮播和 React 和 Typescript。

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

1) 我在 <Swiper ref={swiperRef}> 组件上的 ref 属性出现 TypeScript 错误：

Property 'ref' does not exist on type 'IntrinsicAttributes & Swiper & { children?

2) 如何获取对 swiper 的访问权限，以便我可以在我的 handleMouseEnter 函数中使用 swiper.autoplay.stop(); ？所以我可以使用类似：

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

或类似：

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

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

如何使用 Typescript 来实现这一点？

Answer 1

当 swiper 初始化时，你可以将其存储在 ref 中，然后像这样使用它的 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>
  );
}