Reactjs 有没有办法在react responsive carousal中为每张幻灯片设置不同的时间间隔？

问题：

我创造了一个反应灵敏的狂欢节。它的代码是这样的

import React, { Component } from "react";
import { Carousel } from "react-responsive-carousel";

class Slider extends Component {
  componentDidMount() {
    setInterval(this.reload, 900000);
  }

  reload = () => {
    window.location.reload(true);
  };

  render() {
    const { height } = this.props;

    return (
      <div>
        <Carousel
          autoPlay={true}
          showArrows={false}
          infiniteLoop={true}
          interval={120000}
          stopOnHover={false}
          showThumbs={false}
          showStatus={false}
          showIndicators={false}
        >
          <div>
            <img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"></img>
          </div>
          <div>
            <img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"></img>
          </div>
          <div>
            <img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"></img>
          </div>
        </Carousel>
      </div>
    );
  }
}

export default Slider;

import React，{Component}来自“React”；
从“反应响应旋转木马”导入{Carousel}；
类滑块扩展组件{
componentDidMount（）{
设置间隔（此值为900000）；
}
重新加载=（）=>{
window.location.reload（true）；
};
render（）{
const{height}=this.props；
返回(
);
}
}
导出默认滑块；

---

有人能说有没有办法为每张幻灯片设置不同的时间间隔？。我搜索了很多东西，想知道是否有办法做到这一点，但我没有找到任何线索，以确定它是否可以做到或不能做到。所以如果有人能帮我做这件事，那真的很有帮助。谢谢。

Carousal的

onChange

为您提供索引和项目节点。因此，请执行以下操作

• 为每个carousal div设置一个自定义属性，例如

  数据间隔

• 保持本地状态以控制自动播放的间隔
• 根据carousal正在播放的图像/div，在更改时更新本地状态

看

代码片段

import React，{useState}来自“React”；
从“反应响应旋转木马”导入{Carousel}；
导出默认值（）=>{
const[intervalz，setIntervalz]=useState（3000）；//此处的初始状态表示第一个映像的间隔。
const onChange=（索引，项）=>{
setIntervalz（item.props[“数据间隔]）；
};
返回(
图例1

图例2

图例3

);
};

Carousal的

onChange

为您提供索引和项目节点。因此，请执行以下操作

• 为每个carousal div设置一个自定义属性，例如

  数据间隔

• 保持本地状态以控制自动播放的间隔
• 根据carousal正在播放的图像/div，在更改时更新本地状态

看

代码片段

import React，{useState}来自“React”；
从“反应响应旋转木马”导入{Carousel}；
导出默认值（）=>{
const[intervalz，setIntervalz]=useState（3000）；//此处的初始状态表示第一个映像的间隔。
const onChange=（索引，项）=>{
setIntervalz（item.props[“数据间隔]）；
};
返回(
图例1

图例2

图例3

);
};