其实在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中简单倒计时跳转的更多相关文章

  1. react实现简单倒计时

    今天遇到一个简单的小功能,看网上的一些方法感觉不太适合,所以就手敲了一个,直接上代码!!! import React, { Component } from 'react'; class NoTime ...

  2. react中路由的跳转

    1.react-router-dom 使用react-router-dom 4.4.2 在页面中直接使用 引入 i mport { Link } from 'react-router-dom' 使用 ...

  3. react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 redux的state方法

    在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触red ...

  4. JavaScript学习笔记-简单的倒计时跳转页面

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. js 倒计时跳转

    用js实现简单的倒计时结束页面跳转效果,主要用到setInterval()和clearInterval()方法,页面跳转使用window.location.href = " ".倒 ...

  6. React Hooks简单业务场景实战(非源码解读)

    前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ...

  7. React中diff算法的理解

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

  8. react实战系列 —— React 中的表单和路由的原理

    其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...

  9. 纯JSP实现简单登录跳转

    1.JSP介绍 JSP即Java Server Pages,JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑.网页还能通过tags和script ...

随机推荐

  1. MySQL在渗透测试中的应用

    原文地址:https://xz.aliyun.com/t/400 前言作为一个安全爱好者你不可能不知道MySQL数据库,在渗透过程中,我们也很经常遇到MySQL数据库的环境,本文就带大家了解MySQL ...

  2. TICK技术栈(二)Telegraf安装及使用

    1.什么是Telegraf? Telegraf是一个用Go语言开发的代理程序,可用于收集和报告指标.Telegraf插件直接从其运行的系统中获取各种指标,从第三方API中提取指标,甚至通过StatsD ...

  3. CSPS模拟99

    555我原型笔录 T1 不会线段树维护单调栈被dalao们踩爆 T2 我要实现这样一个东西: 已知a,b,c,使a=a-b,b=b-c 结果我把代码弄成这样: b=b-c;a=a-b; 然后就被dal ...

  4. 大数据之路day02_1--运算符

    运算符这一节主要是介绍算数运算符.赋值运算符.比较运算符.逻辑运算符.三元运算符.接下来一一介绍. 1.算数运算符 ++ 和 -- 的用法 例如:a++ 和 ++a的区别 %的应用场景(取模其实就是取 ...

  5. CAP的学习和应用

    性能优化真言:队列缓存分布式  异步调优堆配置 前言:用CAP有一段时间了,这里简单记录一下,这么好用的东西,小伙伴们赶紧上车吧 一.CAP使用场景? 平时工作中经常使用到MQ,如(kafka,rab ...

  6. maven编码配置

    在环境变量里添加变量 MAVEN_OPTS -Xms256m -Xmx512m -Dfile.encoding=UTF-8

  7. php imagick蒙版做法

    php imagick蒙版做法<pre> $image = new \Imagick(); $image->readImage(__DIR__ . '/mengban.png'); ...

  8. hashMapp

    原文链接:https://www.iteye.com/topic/539465 Hashmap是一种非常常用的.应用广泛的数据类型,最近研究到相关的内容,就正好复习一下.网上关于hashmap的文章很 ...

  9. C语言:互质

    今天遇到一道奇怪的程序题,和平常的不同.同样都是互质,但是一般的题目都是判断两个数字是否互质,但这道题则是给定一个数字n,要求输出所有小于等于n的与n互质的数,题目已经在下面给出: 质数与互质概念不是 ...

  10. mysql字符集那些事

    1..查看mysql当前使用的字符集. 登录mysql 在mysql 里输入 show variables like 'character_set%' mysql> show variables ...