用户登录
用户注册

分享至

react关闭页面时间怎么设置

  • 作者: 你知道我梦着
  • 来源: 51数据库
  • 2023-01-05

react设置关闭页面时间的方法:1、在constructor中设置5秒的时间值;2、在componentDidMount中添加定时器;3、在render中添加判断即可,代码如“<Result status="403"title="403"subTitle="..."extra={<Button>{this.state.dlgTipTxt}</Button>}/>”。

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react关闭页面时间怎么设置?

react中实现简单倒计时关闭页面

首先在constructor中设置5秒的时间值

constructor (props) {
   super(props)
   this.state={
     seconds: 5,
     dlgTipTxt: '5s后关闭页面'
   };
 }

componentDidMount中添加定时器

componentDidMount () {
  let timer = setInterval(() => {
    this.setState((preState) =>({
      seconds: preState.seconds - 1,
      dlgTipTxt: `${preState.seconds - 1}s后自动关闭`,
    }),() => {
      if(this.state.seconds == 0){
        clearInterval(timer);
        window.close()
      }
    });
  }, 1000)
}

render中添加判断

render() {
return (
<Result
status="403"
title="403"
subTitle="抱歉你没有权限访问页面"
extra={
<Button>
{this.state.dlgTipTxt}
</Button>
}
/>
)
}
软件
前端设计
程序设计
Java相关