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

【问题标题】：Accessing slide elements of react-slick slideshow访问 react-slick 幻灯片的幻灯片元素
【发布时间】：2020-07-25 20:17:41
【问题描述】：

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

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

未捕获的类型错误：slider.current.querySelector 不是函数

关于如何引用 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>
    );
}

【问题讨论】：

标签： javascript reactjs slick.js react-slick

【解决方案1】：

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

该错误可以通过将行替换为：

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

【讨论】：