如何在React应用中全局共享辅助函数，避免重复导入？

当然可以实现全局共享辅助函数，不用每次重复导入，下面是几种实用方案，包括你想要的helper.getCookie形式的实现方式：

方案1：挂载到全局window对象（直接实现helper.getCookie调用） #

这种方式最直接，能满足你想要的全局调用形式：

1. 在入口文件（如App.tsx）中导入整个helper模块并挂载到window：

import React from "react";
// 导入整个helper模块
import * as helper from "./controllers/helpers";
// 挂载到window全局对象
window.helper = helper;

// 其余App组件代码不变
export default function App() {
  // ... 原有代码
}

2. 解决TypeScript类型报错：
   创建src/global.d.ts文件，添加全局类型声明：

declare global {
  interface Window {
    helper: typeof import("./controllers/helpers");
  }
}

export {};

之后在任意组件里，直接调用window.helper.getCookie({ name: 'xxx' })；如果你的TS配置允许，甚至可以省略window直接写helper.getCookie(...)。

注意：这种方式在服务端渲染（SSR）场景下可能会有问题，因为window对象在Node环境不存在，适合纯客户端渲染的项目。

方案2：使用React Context（更符合React生态的类型安全方案） #

如果你不想污染全局window，React Context是更优雅的方式，同样能避免重复导入：

1. 创建一个Helper Context文件src/HelperContext.tsx：

import { createContext, useContext } from "react";
import * as helper from "./controllers/helpers";

// 创建上下文，默认值为helper模块
const HelperContext = createContext(helper);

// 自定义Hook，简化上下文获取
export const useHelper = () => useContext(HelperContext);

// 导出Provider组件
export const HelperProvider = HelperContext.Provider;

2. 在App.tsx中用Provider包裹根组件：

import React from "react";
import { HelperProvider } from "./HelperContext";
import * as helper from "./controllers/helpers";
// 其余导入不变

export default function App() {
  return (
    <HelperProvider value={helper}>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          {/* 原有路由组件 */}
        </BrowserRouter>
      </ThemeProvider>
    </HelperProvider>
  );
}

3. 在任意子组件中使用：

import { useHelper } from "../HelperContext";

export default function Home() {
  const helper = useHelper();

  const handleGetCookie = () => {
    const token = helper.getCookie({ name: 'token' });
    console.log(token);
  };

  return (
    <button onClick={handleGetCookie}>获取Cookie</button>
  );
}

这种方式类型完全安全，且兼容SSR场景，是React项目中推荐的全局共享工具函数的方式。

方案3：桶文件（Barrel File）优化导入路径 #

如果只是觉得每次导入路径麻烦，不想写冗长的导入语句，可以创建桶文件简化导入：

在src/controllers目录下创建index.ts文件：

export * from "./helpers";

之后在组件中可以简写为：

import * as helper from "./controllers";

// 使用时
helper.getCookie(...)

这种方式还是需要导入，但路径更简洁，适合希望保持模块规范又想减少重复代码的场景。

内容的提问来源于stack exchange，提问作者Gaspar Luik