react如何将函数挂载全局

在 React 中挂载函数到全局

将函数挂载到全局可以通过 window 对象实现。以下是一种常见的方法：

定义全局函数

// 在组件或工具文件中定义函数
const myGlobalFunction = () => {
  console.log('This is a global function');
};

// 挂载到 window 对象
window.myGlobalFunction = myGlobalFunction;

在项目入口文件中挂载 如果是需要在多个地方使用的工具函数，可以在入口文件（如 index.js 或 App.js）中挂载：

import { utilityFunction } from './utils';

window.utilityFunction = utilityFunction;

使用 TypeScript 的全局扩展 如果使用 TypeScript，可以通过声明合并扩展 Window 接口：

declare global {
  interface Window {
    myGlobalFunction: () => void;
  }
}

注意事项

• 避免过度使用全局函数，可能导致命名冲突或维护困难。
• 在组件卸载时清理全局函数（可选）：

  useEffect(() => {
    window.myGlobalFunction = myGlobalFunction;
    return () => {
      delete window.myGlobalFunction;
    };
  }, []);

替代方案

如果只是需要在组件间共享函数，推荐使用以下方式：

• 通过 Context API 传递函数
• 将函数封装为自定义 Hook
• 使用状态管理库（如 Redux 或 Zustand）