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

我有以下带有 Slick 轮播的 React 应用程序。我创建了一个自定义的“下一步”按钮，需要执行slickNext()方法继续到下一张幻灯片。 Slick 轮播文档和一些问题的答案都提到了以下调用方式slickNext() method.

问题是我收到错误 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>

我该如何解决这个问题？

使用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/#methods https://react-slick.neostack.com/docs/api/#methods