如何在 react-slick carousel 中执行 slickNext 方法？

Question

我有以下带有 Slick carousel 的 React 应用程序。我创建了一个自定义 Next 按钮，需要执行该slickNext()方法才能继续下一张幻灯片。Slick carousel 文档和一些问题的答案提到了以下调用slickNext()方法的方式。

问题是我收到了错误 slider.slick is not a function。

这是我迄今为止尝试过的

gotoNext = () => {
    var slider = document.getElementsByClassName("sliderMain")[0];
    console.log("set", slider)
    slider.slick("slickNext");
}

const SampleNextArrow = (props) => {
        const { className, style } = props;
        return (
            <div
                className={className}
                onClick={this.gotoNext}
            />
           );
        }

    const settings = {
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        swipe: false,
        nextArrow: <SampleNextArrow className="customSlickNext" />,
    };

    <Slider
       id="sliderMain"
       {...settings}
       className="sliderMain"
       afterChange={this.changeSlide}
    >{ /* slider goes here */}
    </Slider>

我该如何解决这个问题？

Answer 1

使用 react-slick，您可以ref在<Slider>. 如果你使用钩子，你可以这样做useRef()：

import React, { useRef } from 'react';

...

const sliderRef = useRef();

<Slider
    ref={sliderRef}
    ...
>
</Slider>

然后，您可以使用sliderRef在您的函数中调用 Slick 方法：

gotoNext = () => {
    sliderRef.current.slickNext();
}

react-slick 的可用方法可以在以下位置找到：https : //react-slick.neostack.com/docs/api