将超时设置为React函数

我有以下对象列表:

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){

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>

)

}

我现在想做的是一次生成一个媒体,并具有可配置的自动播放时间。

我知道我需要使用某种形式的setTimeout函数,例如以下示例:

setTimeout(function(){

this.setState({submitted:false});

}.bind(this),5000); // wait 5 seconds, then reset to false

我只是不确定如何在这种情况下实现它。(我相信我需要使用css来进行淡入淡出过渡,但是我只是为如何首先创建过渡而感到困惑)

回答:

如果要每5秒钟更换一次介质,则必须更新状态以重新呈现组件。也可以使用setInterval代替setTimeoutsetTimeout将仅触发一次,setInterval每X毫秒触发一次。在这里看起来可能是这样:

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>

)

}

}

基本上,代码正在执行的是每5秒钟将activeMediaIndex更改为下一个。通过更新状态,您将触发重新渲染。渲染媒体时,只需渲染一种媒体(您也可以像经典幻灯片一样渲染前一种和下一种)。这样,您将每隔5秒渲染一次新媒体。

以上是 将超时设置为React函数 的全部内容, 来源链接: utcz.com/qa/415784.html

回到顶部