slickGoTo 不会更改活动幻灯片答案

【问题标题】：slickGoTo doesn't change active slideslickGoTo 不会更改活动幻灯片
【发布时间】：2021-02-10 15:52:21
【问题描述】：

我使用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 不是函数

为什么这对我不起作用？

“反应”：“^16.6.3”，

"react-slick": "^0.27.12",

【问题讨论】：

标签： javascript reactjs react-hooks react-slick

【解决方案1】：

根据 react-slick 的slickGoTo() documentation，你需要传递一个函数作为 ref。比如：

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

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

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

  const sliderRef = useRef();

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

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

【讨论】：