0

我正在为我的项目使用 React-Slick ( https://github.com/akiran/react-slick )。我希望能够动态更改提供给滑块的设置。

对于 slickjs ( https://github.com/kenwheeler/slick )，可以使用slickSetOption.

阅读文档后，我意识到这在 React Slick 中是不可能的。以下内容也由该插件的一位贡献者发布：

slickSetOption 不会被实现，这些效果是通过从包装器组件中通过 state 传递 props 来实现的

这让我认为实际上应该可以以动态方式更改滑块的设置。

我的实现看起来像这样

<Slider
    dots={true}
    infinite={true}
    speed={500}
    slidesToShow={1}
    slidesToScroll={1}
    autoplaySpeed={2000}
    autoplay={props.autoplay} // even if the value is changed, autoplay stays to it's initial setting
>
    {images}
</Slider>

使用 React Slick 的游乐场，我把它放在一起来演示这个问题： https ://codesandbox.io/s/react-slick-playground-unyot

我在这里想念什么？

4

1 回答 1

0

我认为这是组件中的一个错误，可能某些内部状态没有改变。作为一种解决方法，您可以key在道具更改时更改autoplay道具，这将强制Slider重新创建组件：

  state = {
    dots: true,
    autoplay: false,
    sliderKey: Date.now()
  };

  useAutoplay() {
    this.setState({
      autoplay: true,
      sliderKey: Date.now()
    });
  }


  <Slider key={this.state.sliderKey} {...this.state}>
  </Slider>

完整代码：https ://codesandbox.io/s/react-slick-playground-dx957

于 2019-09-17T12:16:31.843 回答