Как я могу передать пользовательские реквизиты в SwiperSlide и получить функцию onSlideChange?

#reactjs #swiper #swiperjs

Вопрос:

Я нахожусь в другой ситуации. Я использую Swiper.js для моего приложения React. Мне нужно изменить цвет темы приложения при изменении слайда, и он должен быть динамичным. Это мне нужно передать несколько реквизитов SwiperSlide и получить этот реквизит при смене слайдов. Как я могу с этим справиться ?

 lt;Swiper  id="pathway-slider"  slidesPerView={1}  onSlideChange={(swiper) =gt; {  console.log("Slide index changed to: ", swiper);  }}  gt;  lt;SwiperSlidegt;  Slide 1  lt;/SwiperSlidegt;    lt;SwiperSlidegt;  Slide 2  lt;/SwiperSlidegt;  lt;/Swipergt; 

Когда я консолю.log(swiper), Он дает мне огромный объект, где я могу получить доступ к activeSlideIndex или т. Д. Но как я могу передать туда пользовательские данные ?

Ответ №1:

Нашел способ с помощью пользовательского компонента слайдов:

 /**  * props contains: isActive, isDuplicate, isnNext, isPrev, isVisible  */ const SlideContent = ({...props}) =gt; {  return (  lt;gt;  {props.isActive amp;amp; 'isActive'}  lt;/gt;  ) }  lt;Swipergt;  lt;SwiperSlidegt;  {SlideContent}  lt;/SwiperSlidegt; lt;/Swipergt;  

Пытался сделать это напрямую с lt;SwiperSlidegt; помощью , но это, похоже, нарушает функциональность.