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

我有以下带有 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>

我该如何解决这个问题?


慕侠2389804
浏览 399回答 2
2回答

婷婷同学_

使用react-slick,您可以ref在<Slider>. 如果您使用钩子,则可以使用以下命令来做到这一点useRef():import React, { useRef } from 'react';...const sliderRef = useRef();<Slider&nbsp; &nbsp; ref={sliderRef}&nbsp; &nbsp; ...></Slider>然后,您可以sliderRef在函数中调用 Slick 方法:gotoNext = () => {&nbsp; &nbsp; sliderRef.current.slickNext();}可以在以下位置找到react-slick的可用方法:https://react-slick.neostack.com/docs/api/#methods

HUH函数

当我们在一个组件和其他组件中拥有slider自定义方法 时slickNext(),我有解决方案。slickPrev()我们不能ref作为道具发送。我们应该使用forwardRef在react-slick中,你可以使用 forwardRef()on <Slider>。&nbsp;//carousel.js(child)&nbsp; &nbsp; import React, { useRef } from 'react';&nbsp; &nbsp; const Carousel = React.forwardRef((props, ref) => {&nbsp; &nbsp; <Slider&nbsp; &nbsp; &nbsp; &nbsp; ref={ref}&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; >&nbsp; &nbsp; </Slider>&nbsp; &nbsp; })ref现在您可以在父组件中访问import Carousel from "./carousel";let sliderRef = React.useRef();<a onClick={()=>sliderRef?.current?.slickNext()}>Next</a><a onClick={()=>sliderRef?.current?.slickPrev()}>Prev</a>&nbsp;&nbsp;&nbsp;&nbsp;<Carousel ref={sliderRef}></Carousel>&nbsp; &nbsp; &nbsp;
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript