如何在 Next.js 中获取特定的动态 DOM 元素

Question

我有一个使用轮播库 (swiper js) 的 SSR 站点设置。我遇到的问题是库在页面加载后生成所需的 HTML 及其相关的 CSS classes...这很好。现在，我需要获取由库创建的动态生成的元素，其中包含“active”class。除此之外，我还需要抓住它左边的 3 个兄弟姐妹，以及它右边的 3 个三个兄弟姐妹（如果它们存在则递归）。

我解决这个问题的方法是使用 useEffect，我从 DOM 中抓取活动元素，然后每次检查左或右元素有兄弟姐妹，每个兄弟姐妹最多 3 次。

useEffect(() => {   
    let activeSlide = document.querySelector(".swiper-slide.swiper-slide-active");
    if(activeSlide.previousSibling){
        let current = activeSlide.previousSibling;
        current.classList.add("out-left");
        if(current.previousSibling){current = current.previousSibling; current.classList.add("out-left");}
        if(current.previousSibling){current = current.previousSibling; current.classList.add("out-left");}
        if(current.previousSibling){current = current.previousSibling; current.classList.add("out-left");}

虽然这有效，但感觉真的很脏，就像我没有掌握如何正确操作 DOM，当它在页面加载后动态生成时。有没有更好的方法？

我尝试过使用 refs，但是因为我想要的幻灯片不存在于代码中，所以我无法理解它。请问有什么更好的方法吗？

Answer 1

我宁愿直接使用 Swiper events and properties。您可以查看 realIndex、activeIndex 和 slides 属性以确定当前幻灯片相对于兄弟姐妹的位置。

下面的示例应该可以帮助您入门：

const handleInit = (e) => {
  console.info(e, e.realIndex, e.slides.length);
};

const handleSlideChange = (e) => {
  console.info(e, e.realIndex, e.slides.length);
}

export default function App() {
  return (
    <>
      <Swiper className="mySwiper" onInit={handleInit} onSlideChange={handleSlideChange}>
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

如何在 Next.js 中获取特定的动态 DOM 元素

How to get specific dynamic DOM elements in Next.js

javascript

reactjs

server-side-rendering

next.js

swiperjs