首頁 > web前端 > 前端問答 > react關閉頁面時間怎麼設定

react關閉頁面時間怎麼設定

藏色散人
發布: 2023-01-04 16:46:09
原創
1141 人瀏覽過

react設定關閉頁面時間的方法:1、在constructor中設定5秒的時間值;2、在componentDidMount中加入定時器;3、在render中加入判斷即可,程式碼如「< Result status="403"title="403"subTitle="..."extra={}/>」。

react關閉頁面時間怎麼設定

本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react關閉頁面時間怎麼設定?

react中實作簡單倒數關閉頁面

#首先在constructor中設定5秒的時間值

constructor (props) {
   super(props)
   this.state={
     seconds: 5,
     dlgTipTxt: &#39;5s后关闭页面&#39;
   };
 }
登入後複製

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>
}
/>
)
}
登入後複製

推薦學習:《react影片教學

以上是react關閉頁面時間怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板