React Swiper自定义数字分页集成问题：点击切换后页码不更新

问题根源：直接用controlledSwiper?.activeIndex传递当前页码时，controlledSwiper是Swiper实例对象，它的属性变化不会触发React组件重新渲染，所以点击切换后页码无法自动更新。

解决方法是单独维护当前页码的React状态，并通过Swiper的slideChange事件同步更新这个状态：

自定义分页组件（无需修改） #

type ArrowPaginationProps = {
  current: number;
  total: number;
  onClickPrev: () => void;
  onClickNext: () => void;
};

export const ArrowPagination = (props: ArrowPaginationProps) => {
  return (
    <div className="arrow-pagination">
      <button type="button" onClick={props.onClickPrev}>
        Prev
      </button>
      <div className="arrow-pagination-label">
        {props.current} / {props.total}
      </div>
      <button type="button" onClick={props.onClickNext}>
        Next
      </button>
    </div>
  );
};

修改后的Swiper集成代码 #

import React, { useState } from "react";
import { Swiper, SwiperSlide, SwiperClass } from "swiper/react";
import { Controller } from "swiper/modules";
import { ArrowPagination } from "./ArrowPagination";

import "swiper/css";
import "./styles.css";

export default function App() {
  const [controlledSwiper, setControlledSwiper] = useState<SwiperClass>(null);
  // 单独维护当前页码状态，初始值为1（Swiper的activeIndex从0开始）
  const [currentSlide, setCurrentSlide] = useState(1);

  const handleClickPrev = () => controlledSwiper?.slidePrev();
  const handleClickNext = () => controlledSwiper?.slideNext();

  // 监听滑动切换事件，同步更新当前页码
  const handleSlideChange = (swiper: SwiperClass) => {
    setCurrentSlide(swiper.activeIndex + 1);
  };

  return (
    <>
      <Swiper
        modules={[Controller]}
        onSwiper={setControlledSwiper}
        // 添加滑动切换事件监听
        onSlideChange={handleSlideChange}
      >
        {slides.map((text, idx) => {
          return <SwiperSlide key={idx}>{text}</SwiperSlide>;
        })}
        <div slot="container-end">
          <ArrowPagination
            current={currentSlide}
            total={slides.length}
            onClickPrev={handleClickPrev}
            onClickNext={handleClickNext}
          />
        </div>
      </Swiper>
    </>
  );
}

const slides = [
  "Slide 1",
  "Slide 2",
  "Slide 3",
  "Slide 4",
  "Slide 5",
  "Slide 6",
  "Slide 7",
  "Slide 8",
  "Slide 9",
  "Slide 10",
];

关键修改说明 #

• 新增currentSlide状态存储当前页码，确保状态变化能触发组件重新渲染
• 添加onSlideChange事件监听，每次滑动切换时同步更新页码
• 移除了原代码中错误的controller={{ control: controlledSwiper }}配置（该配置用于控制其他Swiper实例，而非当前实例）
• 点击按钮的函数中增加可选链操作符?.，避免controlledSwiper为null时触发报错

修改完成后，无论是点击按钮切换还是手动滑动Swiper，页码都会实时更新。

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