如何在React-Slick轮播组件中使用slickNext方法？

Question

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

问题是我收到了错误信息：slider.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>

我该如何解决这个问题？

- David Johns

---

为什么在return语句之后还有一些代码？ - Heartbit

@Saeid-a 这是我的自定义箭头 div。 - David Johns

您可能需要查看react-slick文档，因为方法调用方式不同：https://react-slick.neostack.com/docs/api - Ed Lucas

Answer 1

使用 react-slick，您可以在 <Slider> 上添加 ref 属性。如果您正在使用 hooks，则可以使用 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

- Ed Lucas

---

谢谢。我正在使用类组件。所以，React.createRef(); 对我有用。 - David Johns

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>
     

- bhaRATh