How to set the time to close the page in react

How to set the page closing time in react: 1. Set the time value of 5 seconds in the constructor; 2. Add a timer in componentDidMount; 3. Add judgment in render, the code is like "< Result status="403"title="403"subTitle="..."extra={{this.state.dlgTipTxt}}/>".

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to set the time to close the page in react?

React to implement a simple countdown to close the page

First set the time value of 5 seconds in the constructor

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

Add a timer to 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)
}

Add judgment in render

render() {
return (
<Result
status="403"
title="403"
subTitle="抱歉你没有权限访问页面"
extra={
<Button>
{this.state.dlgTipTxt}
</Button>
}
/>
)
}

Recommended learning: "react video tutorial"

The above is the detailed content of How to set the time to close the page in react. For more information, please follow other related articles on the PHP Chinese website!