其实在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. 使用Windows Powershell卸载和安装Win10 原生应用的方法

    新装的Win10带有大量的实际工作和生活中不怎么常用的APP,如果觉得这些APP占用磁盘空间或者想要卸载这些应用(APP),Win10下并不能使用Windows 应用管理器直接图形化地卸载这些应用,而 ...

  2. C语言1博客作业04

    问题 答案 这个作业属于那个课程 C语言程序设计1 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/9770 我在这 ...

  3. 数竞大佬jhc的三角函数复习题

    班主任让数竞大佬jhc整理的三角函数复习题,我参与编辑完成.个别题目来自参考书.度盘pdf格式下载:复习题提取码419d,答案提取码5a12 "单纯"的运算 本文由蒋浩川原创,由\ ...

  4. 学习笔记16_页面缓存/进程外Session

    *页面缓存:适用于访问量较高的网站 <%@OutputCache Duration="15"//缓存15秒  VaryByParam='*' //请求的任何一处发生改变,缓存 ...

  5. Python脚本之——API自动化框架总结

    学完了Python脚本接口自动化之后,一直没有对该框架做总结,今天终于试着来做一份总结了. 框架结构如下图: 来说一下每个目录的作用: Configs:该目录下存放的是.conf,.ini文件格式的配 ...

  6. Scrapy进阶知识点总结(四)——Item Pipeline

    Item Pipeline Item Pipeline调用发生在Spider产生Item之后.当Spider解析完Response之后,Item就会传递到Item Pipeline,被定义的Item ...

  7. 设计模式(Java语言)-单例模式

    单例模式,简而言之就是在整个应用程序里面有且仅有一个实例,在程序的任何时候,任何地方获取到的该对象都是同一个对象.单例模式解决了一个全局的类被频繁创建和销毁的,或者每次创建或销毁都需要消耗大量cpu资 ...

  8. 打包上传被拒 Guideline 2.5.1 - Performance - Software Requirements

    打包上传被拒 Guideline 2.5.1 - Performance - Software Requirements 在项目中全部搜索:prefs:root 找到后,把这个私有的 NSURL *u ...

  9. vue 封装方法

    个我这个是局部引入方法,下次有需要全局在补上(全局:在main.js文件引入封装的方法js文件,然后用Vue.prototype) 一.新建一个js文件loading.js 二.编辑loading.j ...

  10. nyoj 60-谁获得了最高奖学金 (逻辑判断)

    60-谁获得了最高奖学金 内存限制:64MB 时间限制:1000ms Special Judge: No accepted:8 submit:17 题目描述:     某校的惯例是在每学期的期末考试之 ...