javascript - slickGoTo 不会更改事件幻灯片

Question

我使用 react-slick 添加了 slider 到我的 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 ，你需要传递一个函数作为引用。就像是:

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

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

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

  const sliderRef = useRef();

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

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