react中简单倒计时跳转
Posted a-cat
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react中简单倒计时跳转相关的知识,希望对你有一定的参考价值。
其实在react中实现倒计时的跳转方法有很多中,其中我认为较为好用的就是通过定时器更改state中的时间值。
首先在constructor中设置10秒的时间值:
constructor () { super() this.state={ seconds: 10, }; }
然后在componentDidMount中添加定时器:
componentDidMount () { let timer = setInterval(() => { this.setState((preState) =>({ seconds: preState.seconds - 1, }),() => { if(this.state.seconds == 0){ clearInterval(timer); } }); }, 1000) }
然后在render中添加判断跳转
if (this.state.seconds === 0) { window.location.href=‘http://www.cnblogs.com/a-cat/‘; }
这种就可以完成倒计时跳转了!
以上是关于react中简单倒计时跳转的主要内容,如果未能解决你的问题,请参考以下文章