反应光滑 slickSetOption

Question

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

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

来完成

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

slickSetOption will not be implemented, those effects be achieved by passing props via state from the wrapper component

这让我觉得应该实际上可以动态更改滑块的设置。

我的实现是这样的

<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 的 playground 将其放在一起来演示这个问题： https://codesandbox.io/s/react-slick-playground-unyot

我在这里错过了什么？

Answer 1

我认为这是组件中的错误，可能某些内部状态未更改。作为解决方法，您可以在 autoplay 属性更改时更改 key 属性，这将强制重新创建 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

反应光滑 slickSetOption

React Slick slickSetOption

reactjs

react-slick