如何在react-slick轮播中执行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，您可以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

Answer 2

当我们在一个组件和其他组件中拥有slider自定义方法 时slickNext()，我有解决方案。slickPrev()

我们不能ref作为道具发送。我们应该使用forwardRef

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

 //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>