设置超时以响应函数 [英] Set TimeOut to React Function

问题描述

我有以下对象列表:

mediaList[{id:1, url:"www.example.com/image1", adType:"image/jpeg"},{id:2, url:"www.example.com/image2", adType:"image/jpg"},{id:3, url:"www.example.com/video1", adType: "video/mp4"}]

我需要创建一个具有可配置持续时间(1 秒、5 秒、10 秒)的幻灯片.到目前为止，我可以从 mediaList

生成媒体列表

 renderSlideshow(ad){让 adType =ad.adType;如果(类型.包括(图像")){返回(<div className="imagePreview"><img src={ad.url}/>

);}else if (adType.includes("video")){返回(<video className="videoPreview" 控件><source src={ad.url} type={adType}/>您的浏览器不支持 video 标签.</视频>)}}使成为(){返回(<div>{this.props.mediaList.map(this.renderSlideshow.bind(this))}

)}

我现在想要做的是一次生成一个媒体，并具有可配置的自动播放持续时间.

我知道我需要使用某种形式的 setTimeout 函数，例如这个例子:

setTimeout(function(){this.setState({submitted:false});}.bind(this),5000);//等待 5 秒，然后重置为 false

我只是不确定如何在这种情况下实现它.(我相信我需要使用 css 来实现淡入淡出过渡，但我一开始就对如何创建过渡感到困惑)

解决方案

如果你想每 5 秒改变一次媒体，你将不得不更新状态以重新渲染你的组件 你也可以使用 setInterval 而不是 setTimeout.setTimeout 只会触发一次，setInterval 会每 X 毫秒触发一次.下面是它的样子:

class MyComponent 扩展 React.Component {构造函数(道具){超级(道具)；this.state = { activeMediaIndex: 0 };}componentDidMount() {setInterval(this.changeActiveMedia.bind(this), 5000);}更改活动媒体(){const mediaListLength = this.props.medias.length;让 nextMediaIndex = this.state.activeMediaIndex + 1;if(nextMediaIndex >= mediaListLength) {下一个媒体索引 = 0;}this.setState({ activeMediaIndex:nextMediaIndex });}渲染幻灯片(){const ad = this.props.medias[this.state.activeMediaIndex];让 adType = ad.adType;如果(类型.包括(图像")){返回(<div className="imagePreview"><img src={ad.url}/>

);}else if (adType.includes("video")){返回(<video className="videoPreview" 控件><source src={ad.url} type={adType}/>您的浏览器不支持 video 标签.</视频>)}}使成为(){返回(<div>{this.renderSlideshow()}

)}}

代码所做的基本上是每 5 秒，将 activeMediaIndex 更改为下一个.通过更新状态，您将触发重新渲染.渲染媒体时，只渲染一个媒体(您也可以像经典幻灯片一样渲染上一个和下一个).这样，每 5 秒，您将渲染一个新媒体.

I have the following object list:

mediaList[
 {id:1, url:"www.example.com/image1", adType:"image/jpeg"},
 {id:2, url:"www.example.com/image2", adType:"image/jpg"},
 {id:3, url:"www.example.com/video1", adType: "video/mp4"}
]

I need to create a slideshow that has a configurable duration (1s, 5, 10s). So far I can generate a list of the media from the mediaList

  renderSlideshow(ad){
    let adType =ad.adType;
    if(type.includes("image")){
      return(
        <div className="imagePreview">
          <img src={ad.url} />
        </div>
      );
    }else if (adType.includes("video")){
      return(
        <video className="videoPreview" controls>
            <source src={ad.url} type={adType}/>
          Your browser does not support the video tag.
        </video>
      )

    }
  }

 render(){   
    return(
      <div>
          {this.props.mediaList.map(this.renderSlideshow.bind(this))}
      </div>
    )
 }

What I want to do now is generate the media one at a time with configurable durations for autoplay.

I know I need to use some form of a setTimeout function like this example:

setTimeout(function(){
         this.setState({submitted:false});
    }.bind(this),5000);  // wait 5 seconds, then reset to false

I'm just not sure how to implement it for this scenario. (I believe I'll need to use css for the fade transitions but I'm just stumped on how to create the transition in the first place)

解决方案

If you want to change the media on every 5 seconds, you will have to update the state to re-render your components You can also use setInterval instead of setTimeout. setTimeout will be triggered only once, setInterval will be triggered every X milliseconds. Here what it may look like:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeMediaIndex: 0 };
  }

  componentDidMount() {
    setInterval(this.changeActiveMedia.bind(this), 5000);
  }

  changeActiveMedia() {
    const mediaListLength = this.props.medias.length;
    let nextMediaIndex = this.state.activeMediaIndex + 1;

    if(nextMediaIndex >= mediaListLength) {
      nextMediaIndex = 0;
    }

    this.setState({ activeMediaIndex:nextMediaIndex });
  }

  renderSlideshow(){
    const ad = this.props.medias[this.state.activeMediaIndex];
    let adType = ad.adType;
    if(type.includes("image")){
      return(
        <div className="imagePreview">
          <img src={ad.url} />
        </div>
      );
    }else if (adType.includes("video")){
      return(
        <video className="videoPreview" controls>
            <source src={ad.url} type={adType}/>
          Your browser does not support the video tag.
        </video>
      )

    }
  }

  render(){   
    return(
      <div>
          {this.renderSlideshow()}
      </div>
    )
  }
}

Basically what the code is doing is that every 5 seconds, will change the activeMediaIndex to the next one. By updating the state, you will trigger a re-render. When rendering the media, just render one media (you can also render the previous one and the next one like a classic slideshow). Thus way, every 5 seconds, you will render a new media.

这篇关于设置超时以响应函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！