REACT如何限制只打开一个新标签页

总体思路

使用localStorage保存一个标记变量‘pageCount’,在打开新标签页后给该值+1,关闭标签页时-1。点击打开新标签页时,判断该值是否为0,是则同意跳转。

分解动作

  1. 跳转判断
  function handleJumpToModelManager(labelId){
    if(localStorage.count!=0||!localStorage.count){
      window.open(`${publicPath}#/modelmanager`,'_blank');
      localStorage.setItem(‘pageCount’,1);
    }else{
      alert('请勿重复打开页面!');
    }
  }
  1. 关闭新标签页时设置pageCount-1
    在不同阶段处理问题时我们总会想到生命周期,在React类组件中,组件卸载前可以使用componentWillUnmount() ,该会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等。
    但是,关闭标签页这个行为不会触发组件的生命周期,而是会直接消失。
    这时候就要用到浏览器事件beforeunload
    当浏览器窗口关闭或者刷新时,会触发 beforeunload 事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。
    所以,我们在组件加载时添加该事件:
    window.onbeforeunload = () =>{
      localStorage.setItem(‘pageCount’,localStorage.pageCount+1);
    }

如有不妥烦请指教!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容