React中使用Swiper.js实现居中激活幻灯片文本显隐的问题

当slidesPerView配置为大于1的数值时，Swiper默认会将所有在可视区域内的幻灯片都标记为active状态，isActive参数也会对所有可见幻灯片返回true，不会单独识别居中的幻灯片。你需要额外开启centeredSlides: true配置，开启后Swiper会自动将居中位置的幻灯片标记为唯一的swiper-slide-active类，对应的isActive参数也会仅对居中幻灯片返回true。

• 未开启centeredSlides配置，无法单独识别居中幻灯片
• 自定义判断方法textJsx中使用document.querySelector全局查询只会匹配到第一个卡片元素，无法正确判断当前遍历的幻灯片是否处于居中位置
• 底部控制箭头的属性错误使用了class而非React规范的className
• SwiperCore.use注册插件逻辑放在组件内部，会导致每次组件渲染都重复执行注册操作

import React from "react";
import styles from "./Carousel.module.scss";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper.scss";
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper";

// 插件注册放到组件外部，避免重复执行
SwiperCore.use([Autoplay, Pagination, Navigation]);

const Carousel = () => {
  const cardData = [
    {
      img: "email.svg",
      title: "email",
      para: "variable text ",
    },
    {
      img: "facebook.svg",
      title: "facebook",
      para: "variable text ",
    },
    {
      img: "instagram.svg",
      title: "insta",
      para: "variable text ",
    },
    {
      img: "linkedin.svg",
      title: "linked",
      para: "variable text ",
    },
  ];
  return (
    <>
      <Swiper
        autoplay={{
          delay: 3000,
          disableOnInteraction: false,
        }}
        navigation={{
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        }}
        spaceBetween={30}
        autoHeight={true}
        loop={true}
        slidesPerView={1}
        // 新增居中配置
        centeredSlides={true}
        breakpoints={{
          768: {
            slidesPerView: 2,
            spaceBetween: 40,
          },
          902: {
            slidesPerView: 3,
            spaceBetween: 50,
          },
        }}
      >
        {cardData.map((card) => {
          return (
            <SwiperSlide key={card.title}>
              <div className={styles.productCard}>
                <img src={card.img} alt={card.title} />
                <h2>{card.title}</h2>
                {({ isActive }) => (
                  <div>
                    {/* 直接用isActive判断即可，不需要自定义判断逻辑 */}
                    {isActive ? <p>{card.para}</p> : <p>not active</p>}
                  </div>
                )}
              </div>
            </SwiperSlide>
          );
        })}
      </Swiper>
      <div className="swiper-button-next">next arrow</div>
      <div className="swiper-button-prev">prev arrow</div>
    </>
  );
};
export default Carousel;

内容的提问来源于stack exchange，提问作者PMG9090