在 Ionic 7 和 React 18 中，如何获取对 Swiper 的引用，以便用户可以通过单击按钮进行转换？

Question

我正在使用 Ionic 7、React 18 和 Swiper 10.3.1。我有以下在两个图像之间切换的组件。我想在有人单击按钮时对其进行动画处理以进行水平翻转，但我在 onClick 按钮处理程序中获取对 Swiper 的引用时遇到问题。我有这个

  const swiperRef = useRef(null);
        ...
  const handleSeeNext = () => {
    if (swiperRef.current) {
      swiperRef.current.getSwiper().slideNext();
    }
  };

但是编译器告诉我

Property 'getSwiper' does not exist on type 'never'.ts(2339)

这是完整的组件

import { IonImg } from "@ionic/react";
import React, { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
//import "swiper/css/swiper.css";
import Card from "../types/card.type";
interface CardComponentProps {
  card: Card;
}

const CardComponent: React.FC<CardComponentProps> = ({ card }) => {
  const swiperRef = useRef(null);
  
  const slideOptions = {
    on: {
      beforeInit(swiper) {
        swiper.params.slidesPerView = 1;
        swiper.params.slidesPerColumn = 1;
        swiper.params.slidesPerGroup = 1;
        swiper.params.watchSlidesProgress = true;
        swiper.params.spaceBetween = 0;
        swiper.params.virtualTranslate = true;

        swiper.classNames.push(`${swiper.params.containerModifierClass}flip`);
        swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
      },
      setTranslate(swiper) {
        const { slides, rtlTranslate: rtl } = swiper;
        slides.forEach((slide) => {
          const $slideEl = swiper.$(slide);
          let progress = slide.progress;

          if (swiper.params.flipEffect.limitRotation) {
            progress = Math.max(Math.min(slide.progress, 1), -1);
          }

          const offset$$1 = slide.swiperSlideOffset;
          const rotate = -180 * progress;
          let rotateY = rotate;
          let rotateX = 0;
          let tx = -offset$$1;
          let ty = 0;

          if (!swiper.isHorizontal()) {
            ty = tx;
            tx = 0;
            rotateX = -rotateY;
            rotateY = 0;
          } else if (rtl) {
            rotateY = -rotateY;
          }

          $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;

          $slideEl.transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
        });
      },
      setTransition(swiper, duration) {
        const { slides, activeIndex, $wrapperEl } = swiper;

        slides
          .transition(duration)
          .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
          .transition(duration);

        if (swiper.params.virtualTranslate && duration !== 0) {
          let eventTriggered = false;

          slides.eq(activeIndex).transitionEnd(() => {
            if (eventTriggered) return;

            eventTriggered = true;
            swiper.animating = false;
            const triggerEvents = ["webkitTransitionEnd", "transitionend"];

            triggerEvents.forEach((eventName) => {
              $wrapperEl.trigger(eventName);
            });
          });
        }
      },
    },
  };

  const handleSeeNext = () => {
    if (swiperRef.current) {
      swiperRef.current.getSwiper().slideNext();
    }
  };

  const frontImgDataUri = `data:${card.frontImgMimeType};base64,${
    card.frontImgBase64Encoded
  }`;
  const backImgDataUri = `data:${card.backImgMimeType};base64,${
    card.backImgBase64Encoded
  }`;

  return (
    <>
    <Swiper {...slideOptions}>
      {/* Your slides go here */}
      <div className="swiper-slide"><IonImg src={frontImgDataUri} alt="Front" /></div>
      <div className="swiper-slide"><IonImg src={backImgDataUri} alt="Back" /></div>
      {/* Add more slides as needed */}
    </Swiper>
    <button onClick={handleSeeNext}>See Next</button>
    </>
  );
};

export default CardComponent;

Answer 1

首先，您需要为 Swiper 实例定义一个状态：

const [my_swiper, set_my_swiper] = useState<SwiperCore>({});

然后，在 Swiper 组件中，您可以使用 onInit 属性在初始化时设置 Swiper 实例：

<Swiper slidesPerView={1} onInit={(swiper) => { set_my_swiper(swiper)}}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
</Swiper>

现在，您可以使用 Swiper 实例来调用 slipNext() 和 slipPrev() 方法：

my_swiper.slideNext();
my_swiper.slidePrev();

您可以在任何地方调用这些方法来动态控制您的 Swiper。

如果你想导航到特定的幻灯片，可以使用slideTo()方法：

my_swiper.slideTo(number);

对于按钮单击，您可以使用按钮的 onClick 属性并调用其中的 SlideNext() 或 slipPrev() 方法：

<IonButton onClick={() => my_swiper.slideNext()}>Next Slide</IonButton>