React中Swiper组件Navigation功能点击不生效，该如何解决？

问题修复方案 #

以下是对应问题的排查和修复步骤：

• 优先检查样式导入是否完整
  必须同时导入Swiper基础样式和用到的功能模块对应的样式，缺少模块样式会导致交互逻辑异常，在组件顶部补充导入：

  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';
  

• 确认功能模块的导入路径正确
  检查Navigation等模块的导入语句，确保是从swiper/modules引入：

  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
  

• 手动指定导航箭头节点解决遮挡问题
  如果上述操作后问题依然存在，大概率是默认生成的导航箭头被其他元素遮挡导致点击失效，可以手动声明箭头节点并指定挂载目标：

  import { useRef } from 'react';
  
  // 组件内代码
  <Swiper
    modules={[Navigation, Pagination, Scrollbar, A11y]}
    spaceBetween={50}
    slidesPerView={1}
    navigation={{
      nextEl: '.custom-swiper-next',
      prevEl: '.custom-swiper-prev',
    }}
    pagination={{ clickable: true }}
    className="mySwiper"
  >
    {/* 手动添加导航箭头节点 */}
    <div className="custom-swiper-prev swiper-button-prev"></div>
    <div className="custom-swiper-next swiper-button-next"></div>
    {banners.map((item, i) => (
      <SwiperSlide key={i}>
        <div className="slider-single">
          blabla
        </div>
      </SwiperSlide>
    ))}
  </Swiper>
  

  配套补充CSS确保箭头可点击：

  .custom-swiper-prev, .custom-swiper-next {
    z-index: 999;
  }
  

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