如何向SwiperSlide传递自定义props并在onSlideChange函数中获取？

有两种常用实现方案，可根据自定义数据的复杂度选择： #

方案1：使用DOM dataset属性（适合简单数据场景） #

SwiperSlide最终会渲染为标准DOM元素，直接给组件添加data-*前缀的自定义属性，即可在slide切换事件中从激活slide的DOM节点读取对应值：

<Swiper
  id="pathway-slider"
  slidesPerView={1}
  onSlideChange={(swiper) => {
    // 拿到当前激活slide的DOM实例
    const activeSlide = swiper.slides[swiper.activeIndex]
    // 读取自定义属性
    const currentThemeColor = activeSlide.dataset.themeColor
    // 此处执行修改全局主题色的逻辑即可
    console.log('当前主题色', currentThemeColor)
  }}
>
  {/* 直接给SwiperSlide加data-前缀的自定义属性 */}
  <SwiperSlide data-theme-color="#2563eb">
      Slide 1
  </SwiperSlide>
  
  <SwiperSlide data-theme-color="#16a34a">
      Slide 2
  </SwiperSlide>
</Swiper>

如果是循环渲染slide的场景，动态绑定属性即可：

const slideList = [
  { id: 1, content: 'Slide 1', theme: '#2563eb' },
  { id: 2, content: 'Slide 2', theme: '#16a34a' }
]

// 在Swiper组件内循环渲染
{slideList.map(item => (
  <SwiperSlide key={item.id} data-theme-color={item.theme}>
    {item.content}
  </SwiperSlide>
))}

方案2：索引映射自定义数据（适合复杂数据场景） #

如果自定义数据包含对象、函数等无法直接序列化到DOM属性的内容，可以提前维护和slide顺序一一对应的配置数组，直接通过激活索引取值即可：

// 维护和slide顺序完全匹配的自定义配置数组
const slideCustomConfig = [
  { themeColor: '#2563eb', extra: { mode: 'dark', fontSize: 16 } },
  { themeColor: '#16a34a', extra: { mode: 'light', fontSize: 14 } }
]

<Swiper
  id="pathway-slider"
  slidesPerView={1}
  onSlideChange={(swiper) => {
    const currentConfig = slideCustomConfig[swiper.activeIndex]
    console.log('当前slide全量自定义配置', currentConfig)
  }}
>
  <SwiperSlide>
      Slide 1
  </SwiperSlide>
  
  <SwiperSlide>
      Slide 2
  </SwiperSlide>
</Swiper>

注意：如果存在slide动态增删的场景，需要保证配置数组和slide的顺序、数量完全同步 #

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