slickGoTo 不会更改活动幻灯片

Question

我使用 react-slick 向我的 React 应用程序添加了滑块。对于 <Slider> 我添加了 ref，我正在尝试使用它来更改活动幻灯片：

import React, { useRef } from 'react';
import Slider from 'react-slick';

const TestSlider = () => {
  const handleOnClick = index => {
    sliderRef.slick('slickGoTo', index);
    // also try sliderRef.slickGoTo(index);
  };

  <Slider {...settings} ref={sliderRef}>
    ...
  </Slider>
}

但是我得到一个错误：

TypeError: sliderRef.slick is not a function

为什么这对我不起作用？

"react": "^16.6.3",

"react-slick": "^0.27.12",

Answer 1

根据 react-slick 的 slickGoTo() documentation，您需要传递一个函数作为 ref。类似于：

  const handleOnClick = index => {
    this.slider.slickGoTo(index);
  };

  <Slider {...settings} ref={slider => (this.slider = slider)}>
    ...
  </Slider>

如果你想使用 useRef 钩子创建一个 ref，它看起来像：

  const sliderRef = useRef();

  const handleOnClick = index => {
    sliderRef.current.slickGoTo(index);
  };

  <Slider {...settings} ref={sliderRef}>
    ...
  </Slider>

slickGoTo 不会更改活动幻灯片

slickGoTo doesn't change active slide

javascript

reactjs

react-slick

react-hooks