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

我有下面的React应用程序和一个光滑的旋转木马。我创建了一个自定义的“下一步”按钮，需要执行

slickNext（）

方法才能继续下一张幻灯片。Slick carousel文档和一些问题的答案提到了以下调用

slickNext（）

方法的方法

问题是我得到了错误

滑块。slick不是一个函数

这就是我迄今为止所尝试的

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>

gotoNext=（）=>{
var slider=document.getElementsByClassName（“sliderMain”）[0]；
console.log（“设置”，滑块）
slider.slick（“slickNext”）；
}
const SampleNextArrow=（道具）=>{
const{className，style}=props；
返回(
);
}
常量设置={
点：是的，
无限：错，
速度:500,，
幻灯片放映：1，
幻灯片滚动：1，
刷：错，
下一行：，
};
{/*滑块位于此处*/}

---

如何解决此问题？

使用react slick，您可以在

上添加

ref

道具。如果您使用的是钩子，那么可以使用

useRef（）

：

import React，{useRef}来自“React”；
...
常量sliderRef=useRef（）；

然后，您可以使用

sliderRef

在函数中调用Slick方法：

gotoNext=（）=>{
sliderRef.current.slickNext（）；
}

---

react slick的可用方法可以在下面找到：

为什么在

return

语句之后有一些代码？@Saeid-a这是我的自定义箭头div您可能需要查看react slick文档，因为方法调用的执行方式不同：谢谢。我正在使用一个类组件。因此，React.createRef（）；为我工作