Question

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

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

未捕获的TypeError：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>
    );
}

Answer 1

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

可以通过将行替换为：

来解决错误。

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

访问反应式幻灯片的幻灯片元素

1 个答案: