同一页面中如何隔离两个React Swiper实例的useSwiper钩子？

出现这个问题的核心原因是：useSwiper钩子默认通过React Context获取最近的Swiper实例，但当页面存在多个Swiper时，若组件嵌套结构或Context作用域处理不当，会导致导航操作意外触发所有实例。以下是两种可靠的解决方法：

方法1：使用实例引用（Ref）手动绑定导航 #

通过useRef获取每个Swiper的实例，直接调用实例方法控制导航，彻底避免Context干扰。

FirstSection 示例代码： #

import { useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

const FirstSection = () => {
  const swiperRef = useRef(null);

  const handlePrev = () => swiperRef.current?.slidePrev();
  const handleNext = () => swiperRef.current?.slideNext();

  return (
    <div>
      <Swiper onSwiper={(swiper) => swiperRef.current = swiper}>
        <SwiperSlide>First Section Slide 1</SwiperSlide>
        <SwiperSlide>First Section Slide 2</SwiperSlide>
        <SwiperSlide>First Section Slide 3</SwiperSlide>
      </Swiper>
      <button onClick={handlePrev}>上一页</button>
      <button onClick={handleNext}>下一页</button>
    </div>
  );
};

export default FirstSection;

SecondSection 示例代码： #

完全复用上述结构，只需维护自己独立的swiperRef即可，点击导航按钮只会操作当前组件内的Swiper实例。

方法2：使用Swiper内置Navigation配置（指定唯一选择器） #

利用Swiper原生的navigation配置，给每个实例的导航按钮设置唯一的ID/类名，让Swiper自动绑定对应按钮。

FirstSection 示例代码： #

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';

const FirstSection = () => {
  return (
    <div>
      <Swiper
        modules={[Navigation]}
        navigation={{
          prevEl: '#first-section-prev',
          nextEl: '#first-section-next',
        }}
      >
        <SwiperSlide>First Section Slide 1</SwiperSlide>
        <SwiperSlide>First Section Slide 2</SwiperSlide>
        <SwiperSlide>First Section Slide 3</SwiperSlide>
      </Swiper>
      <button id="first-section-prev">上一页</button>
      <button id="first-section-next">下一页</button>
    </div>
  );
};

export default FirstSection;

SecondSection 示例代码： #

更换导航按钮的唯一ID即可：

<Swiper
  modules={[Navigation]}
  navigation={{
    prevEl: '#second-section-prev',
    nextEl: '#second-section-next',
  }}
>
  {/* 轮播内容 */}
</Swiper>
<button id="second-section-prev">上一页</button>
<button id="second-section-next">下一页</button>

注意事项 #

• 若坚持使用useSwiper，必须确保自定义导航组件完全嵌套在对应Swiper组件的内部，避免Context穿透到其他Swiper实例的作用域。
• 两种方法中，实例引用的方式灵活性更高，适合需要添加额外逻辑（比如滑动前后的状态判断）的场景；内置Navigation配置则更简洁，适合基础导航需求。

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