访问 react-slick 幻灯片的幻灯片元素

Question

我正在使用 react-slick 添加幻灯片并实现我自己的延迟加载例程，以便我可以预先加载幻灯片前面的图像（最终提前 2 张）。为此，我需要访问包含由 Slick 封装的幻灯片列表的 DOM 元素。有了该元素后，我应该可以轻松地使用 querySelector() 定位幻灯片以加载其图像。

但是，我在使用我创建的 slider ref 时遇到了问题。它返回对 Slick 对象的引用，它不是 DOM 元素，并且在 slider.current 上使用 querySelector() 会给出错误：

Uncaught TypeError: slider.current.querySelector is not a function

关于如何引用 Slick DOM 元素有什么想法吗？

export default function Carousel({ children, ...slickProps }) {
    const slider = useRef();

    const slickDefaults = {
        dots: true,
        infinite: false,
        slidesToScroll: 1,
        slidesToShow: 1,
        speed: 200,
        arrows: true
    };

    const onNext = () => {
        slider.current.slickNext();
    };
    const onPrev = () => {
        slider.current.slickPrev();
    };

    return (
        <Slider
            {...slickDefaults}
            {...slickProps}
            ref={slider}
            className="carousel"
            beforeChange={(_currentSlide, nextSlide) => {
                if (slider.current) {

                    // The error occurs here
                    const slideElement = slider.current.querySelector(`[data-index="${nextSlide}"]`);

                    if (slideElement) {
                        const images = slideElement.getElementsByTagName('IMG');
                        for (let i = 0; i < images.length; i++) {
                            const image = images[i];
                            const lazySrc = image.getAttribute('data-lazy');
                            if (lazySrc) {
                                image.setAttribute('src', lazySrc)
                                image.removeAttribute('data-lazy');
                            }
                        }
                    }
                }
            }}
            prevArrow={
                <CarouselButton
                    direction="left"
                    clickEvent={onPrev}
                />
            }
            nextArrow={
                <CarouselButton
                    direction="right"
                    clickEvent={onNext}
                />
            }
        >
            {children}
        </Slider>
    );
}

Answer 1

事实证明，我只需要更深入地挖掘 ref 指向的对象。在大多数情况下，ref.current 就足够了，但这里可以在以下位置找到幻灯片 DOM 元素：ref.current.innerSlider.list，它引用了元素 div.slick-list.

可以通过将行替换为：

来解决错误

const slideElement = slider.current.innerSlider.list.querySelector(`[data-index="${slideIndex}"]`);

访问 react-slick 幻灯片的幻灯片元素

Accessing slide elements of react-slick slideshow

javascript

reactjs

slick.js

react-slick