在没有 setState 的情况下动态设置 react slick autoplayspeed

Posted 2023-02-25

【中文标题】在没有 setState 的情况下动态设置 react slick autoplayspeed

【英文标题】：Set react slick autoplayspeed dynamically without setState

【发布时间】：2021-05-04 14:41:05

【问题描述】：

    return 
      dots: false,
      arrows: true,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      centerMode: true,
      autoplay: true,
      cssEase: "linear",
      autoplaySpeed: 2000,
      centerPadding: '0px',
      prevArrow: <this.PrevArrow />,
      nextArrow: <this.NextArrow />,
    ;
   

 PrevArrow(props: any) 
    const  onClick  = props;
    return (
      <div className="left" style= position: "absolute", right: "42px", bottom: "0", padding: "10px 15px", backgroundColor: "rgba(198, 198, 198)", zIndex: 999, height: "44px"  onClick=onClick><i className="fas fa-chevron-left"></i></div>
    );
  

  NextArrow(props: any) 
    const  onClick  = props;
    return (
      <div className="right" style= position: "absolute", right: "0px", bottom: "0", padding: "10px 15px", backgroundColor: "rgba(198, 198, 198)", height: "44px"  onClick=onClick ><i className="fas fa-chevron-right"></i></div>
    );
  

这是我的幻灯片设置

durationArray: any = [2000,2000,3000,5000,7000,10000]

这是我的幻灯片持续时间数组。

我想在 2000 毫秒内滑动第一张幻灯片 第二张幻灯片 2000 毫秒 第三张幻灯片 3000 毫秒等等。

而且我想在没有 setState 的情况下这样做

我该怎么做？

【参考方案1】：

我用我的解决方案为您准备了一个示例。我正在使用 setState （我担心没有它你无法做到）但在我的情况下 Slider 并没有从头开始。点击下一个链接

https://codesandbox.io/s/react-slick-autospeed-7jlew?file=/src/App.js

const getSpeedForSlide = (slide) => 
  switch (slide) 
    case 1:
      return 1000;
    case 2:
      return 2000;
    case 3:
      return 3000;
    case 4:
      return 4000;
    default:
      return 1000;
  
;

export default function App() 
  const [speed, setSpeed] = useState(1000);
  const handleAfterChange = useCallback((slide) => 
    setSpeed(getSpeedForSlide(slide));
  , []);
  return (
    <div className="App">
      <Slider afterChange=handleAfterChange autoplaySpeed=speed autoplay>
        [1, 2, 3, 4].map((item) => (
          <div key=item>item</div>
        ))
      </Slider>
    </div>
  );