Question

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

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

1 个答案: