React中使用Swiper.js如何向SwiperSlide传自定义参数并在onSlideChange获取

方案1：HTML data-* 自定义属性（适用简单数据场景） #

直接给SwiperSlide组件添加data-前缀的自定义属性，Swiper实例的slides字段可以拿到所有slide的DOM节点，结合激活索引即可取出对应属性：

<Swiper
  id="pathway-slider"
  slidesPerView={1}
  onSlideChange={(swiper) => {
    // 获取当前激活的slide元素
    const activeSlide = swiper.slides[swiper.activeIndex];
    // 拿到自定义的主题色属性
    const themeColor = activeSlide.dataset.themeColor;
    // 此处可直接执行修改应用主题色的逻辑
    console.log("当前主题色：", themeColor);
  }}
>
  <SwiperSlide data-theme-color="#ff0000">
      Slide 1
  </SwiperSlide>
  
  <SwiperSlide data-theme-color="#00ff00">
      Slide 2
  </SwiperSlide>
</Swiper>

方案2：数组映射关联数据（适用复杂数据场景） #

如果需要传递对象、函数等复杂自定义数据，可以提前把所有slide的内容和自定义参数统一存到数组中，通过激活索引直接匹配对应数据，维护更清晰：

// 提前定义slide配置，支持存放任意类型的自定义数据
const slideList = [
  {
    content: "Slide 1",
    themeColor: "#ff0000",
    // 可扩展其他任意自定义属性
  },
  {
    content: "Slide 2",
    themeColor: "#00ff00",
  }
]

// 组件内渲染逻辑
<Swiper
  id="pathway-slider"
  slidesPerView={1}
  onSlideChange={(swiper) => {
    const currentSlideData = slideList[swiper.activeIndex];
    const themeColor = currentSlideData.themeColor;
    console.log("当前slide完整自定义数据：", currentSlideData);
  }}
>
  {slideList.map((item, index) => (
    <SwiperSlide key={index}>
      {item.content}
    </SwiperSlide>
  ))}
</Swiper>

如果你需要用data属性传递复杂对象，可以先通过JSON.stringify()序列化后存入，取出时再用JSON.parse()解析即可。

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