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

Question

我有以下带有 Slick 旋转木马的 React 应用程序。我创建了一个自定义的下一步按钮，需要执行 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，您可以在 <Slider> 上添加 ref 道具。如果你使用钩子，你可以用 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

Answer 2

当我们在一个组件中有 slider 并且在另一个组件中有自定义方法 slickNext()、slickPrev() 时，我有解决方案。

我们无法发送 ref 作为道具。我们应该使用 forwardRef

在 react-slick 中，您可以在 <Slider> 上使用 forwardRef()。

 //carousel.js(child)
    import React, { useRef } from 'react';


    const Carousel = React.forwardRef((props, ref) => {


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

    })

现在您可以在父组件中访问 ref

import Carousel from "./carousel";

let sliderRef = React.useRef();


<a onClick={()=>sliderRef?.current?.slickNext()}>Next</a>
<a onClick={()=>sliderRef?.current?.slickPrev()}>Prev</a>
  
  
<Carousel ref={sliderRef}></Carousel>

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

How to execute slickNext method in react-slick carousel?

javascript

reactjs

slick.js

react-slick