如何将自定义道具传递给 SwiperSlide 并获取它的 onSlideChange 函数？

Question

我的处境不同。我正在为我的 React 应用程序使用 Swiper.js。我需要在幻灯片更改时更改应用程序主题颜色，并且它必须是动态的。那就是我需要将一些道具传递给 SwiperSlide 并在幻灯片更改时获得这些道具。我该如何处理？

    <Swiper
      id="pathway-slider"
      slidesPerView={1}
      onSlideChange={(swiper) => {
        console.log("Slide index changed to: ", swiper);
      }}
    >
      <SwiperSlide>
          Slide 1
      </SwiperSlide>
      
      <SwiperSlide>
          Slide 2
      </SwiperSlide>
    </Swiper>

当我 console.log(swiper) 时，它给了我一个巨大的对象，我可以在其中访问 activeSlideIndex 等。但是我如何将自定义数据传递给它？

Answer 1

找到了使用自定义幻灯片组件的方法：

/**
 * props contains: isActive, isDuplicate, isnNext, isPrev, isVisible
 */
const SlideContent = ({...props}) => {
  return (
    <>
      {props.isActive && 'isActive'}
    </>
  )
}

<Swiper>
  <SwiperSlide>
    {SlideContent}
  </SwiperSlide>
</Swiper>

尝试直接使用 <SwiperSlide> 执行此操作，但这似乎破坏了功能。

如何将自定义道具传递给 SwiperSlide 并获取它的 onSlideChange 函数？

How can I pass custom props to SwiperSlide and get it onSlideChange function?

swiper

reactjs

swiperjs