javascript - React redux 应用程序全局运行一个函数

Question

我尝试检测浏览器或选项卡已关闭。在整个大型应用程序中运行一项功能的最佳方式是什么？

window.onbeforeunload = function () {
    return "Do you want to close?";
};

标签： javascriptreactjssingle-page-application

Answer 1

你可以使用反应钩子并在你的 App.js 中实现它。我称之为 useBeforeUnload ：D

import { useEffect } from 'react'

const useBeforeUnload = (
  value: ((evt: BeforeUnloadEvent) => any) | string
) => {
  const handleBeforeunload = (evt: BeforeUnloadEvent) => {
    let returnValue
    if (typeof value === 'function') {
      returnValue = value(evt)
    } else {
      returnValue = value
    }
    if (returnValue) {
      evt.preventDefault()
      evt.returnValue = returnValue
    }
    return returnValue
  }

  useEffect(() => {
    window.addEventListener('beforeunload', handleBeforeunload)
    return () => window.removeEventListener('beforeunload', handleBeforeunload)
  }, [])
}

export default useBeforeUnload