Как динамически менять ссылку на кнопке после свайпа сдайда Swiper?

Question

[Alexander]

Подскажите пожалуйста, как я могу менять путь ссылки при свайпе слайда в Swiper?
Есть кнопка-ссылка buy now, она статическая и весит над слайдерами. имея путь всего на один товар, нужно чтобы свайпе менялся путь у этой кнопки, как это можно реализовать? Первое что приходит на ум это отслеживать индекс при свайпе и подставлять новый путь через useState()

Answer 1

[Дмитрий Марков]

Храните урл в дата атрибуте слайда и при change слайдера меняйте ссылку у кнопки

Comments

[Alexander]

Вот что-то такое прикрутил

const [productLink, setProductLink] = React.useState<string>('/1')

let slides: any = []

  React.useEffect(() => {
    let swiperSlides = document.querySelectorAll('.heroSlide')
    slides = Array.from(swiperSlides)
  })

onSlideChangeTransitionStart={() => {
          const active = slides.find((item: any) => item.classList.contains('swiper-slide-active'))
          const arr = active.getAttribute('data-href')
          setProductLink(arr)
        }}

Работает нормально, только не знаю правильно ли это сделано со стророны react

[Дмитрий Марков]

Alexander, В реакте есть хук useRef, можно получать слайд с помощью его. И все classList заменить на хук useState.