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

【问题标题】：How to execute slickNext method in react-slick carousel?如何在 react-slick 轮播中执行 slickNext 方法？
【发布时间】：2021-02-22 19:36:39
【问题描述】：

我有以下带有 Slick 轮播的 React 应用程序。我创建了一个自定义 Next 按钮，需要执行 slickNext() 方法才能继续下一张幻灯片。 Slick carousel docs和一些问题的答案都提到了以下调用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>

我该如何解决这个问题？

【问题讨论】：

为什么return语句后面有一些代码？
@Saeid-a 这是我的自定义箭头 div
您可能需要查看 react-slick 文档，因为方法调用的执行方式不同：react-slick.neostack.com/docs/api

标签： javascript reactjs slick.js react-slick

【解决方案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

【讨论】：

谢谢。我正在使用一个类组件。所以，React.createRef();为我工作

【解决方案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>

【讨论】：