React项目中Swiper自定义导航按钮突然失效求助

问题原因 #

Swiper 9+版本中，通过onInit手动修改导航元素参数的方式存在时序问题，且官方已推荐直接通过组件props配置导航元素，而非初始化后再修改参数。你之前尝试的SwiperCore.use方法在当前版本中已被modules props替代，所以无效。

修复步骤及代码 #

直接通过navigation props绑定导航按钮的ref，移除onInit中的手动初始化逻辑，同时确保样式正确导入：

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination } from 'swiper/modules';
// 必须导入Swiper核心样式及导航、分页器样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default function Upcoming({heading, color}) {
  const prevRef = useRef(null);
  const nextRef = useRef(null); 

  return (
    <div className="separate" style={{ backgroundColor: color }}>
      <h1 className="pubsem">{heading}</h1>
      <Swiper
        modules={[Navigation, Pagination]}
        // 直接配置导航按钮元素
        navigation={{
          prevEl: prevRef.current,
          nextEl: nextRef.current,
        }}
        pagination={{ clickable: true }}
        spaceBetween={20}
        slidesPerView={3}
        breakpoints={{
          300: { slidesPerView: 1 },
          640: { slidesPerView: 1 },
          768: { slidesPerView: 2 },
          1024: { slidesPerView: 3 },
        }}
      >
        <SwiperSlide>
          <div className="card">
            <div className="card-image">
              <img src={slide1} alt="public seminar" className="card-img" />
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="card">
            <div className="card-image">
              <img src={slide3} alt="public seminar" className="card-img" />
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="card">
            <div className="card-image">
              <img src={slide2} alt="public seminar" className="card-img" />
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="card">
            <div className="card-image">
              <img src={slide2} alt="public seminar" className="card-img" />
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
      <div ref={prevRef} className="swiper-navigation__prev">
        Prev
      </div>
      <div ref={nextRef} className="swiper-navigation__next">
        Next
      </div>
    </div>
  );
}

额外注意事项 #

• 移除了SwiperSlide内部的swiper-slide类，Swiper会自动为SwiperSlide组件添加该类，重复添加可能引发样式冲突
• 若修复后按钮仍无响应，可检查：
  • 组件挂载后prevRef.current和nextRef.current是否为null（可通过useEffect打印验证）
  • Navigation模块是否正确导入
  • Swiper相关样式是否完整加载

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