如何在非渲染的普通JavaScript函数中获取React Context？

好问题！你完全说对了——useContext 是React的Hook，只能在React函数组件或者自定义Hook的顶层作用域中调用，普通的独立异步函数确实没法直接用它。这里给你几个实用的解决方案，你可以根据自己的场景来选：

1. 手动传入Context所需参数（最推荐，逻辑最清晰） #

既然你是在组件里调用这个导出函数，而组件本身是可以正常访问StaticsContext的，那最简单的方式就是在调用时把函数需要的Context值作为参数传进去。这种方式让函数的依赖关系一目了然，后续调试和测试也更方便。

修改后的代码示例： #

首先在组件中获取Context值：

const YourComponent = () => {
  const staticsContext = useContext(StaticsContext);
  const tasks = /* 你的tasks数据 */;

  // 调用时传入Context值
  return (
    <button 
      type="button" 
      className="btn-reset" 
      title="export to .csv" 
      onClick={() => archiveExportCSV(tasks, staticsContext)}
    >
      导出CSV
    </button>
  );
};

然后调整你的异步函数，直接使用传入的参数：

const archiveExportCSV = async (tasks, staticsContext) => { 
  // 这里直接用传入的staticsContext，不用再调用useContext了
  // ... 你的业务逻辑代码 
  Helpers.download(csv,'test.csv','data:text/csv;charset=utf-8'); 
};

2. 将函数封装为自定义Hook（适合多组件复用场景） #

如果这个导出函数需要在多个组件中使用，不想每次都手动传Context参数，可以把它封装成一个自定义Hook。这样Hook内部就能合法调用useContext，返回的函数会自动带上Context依赖。

自定义Hook示例： #

import { useContext, useCallback } from 'react';

const useArchiveExportCSV = () => {
  const staticsContext = useContext(StaticsContext);

  // 用useCallback包裹，避免组件重渲染时重复创建函数
  const archiveExportCSV = useCallback(async (tasks) => {
    // 这里可以直接访问staticsContext
    // ... 你的业务逻辑代码
    Helpers.download(csv,'test.csv','data:text/csv;charset=utf-8');
  }, [staticsContext]); // 把staticsContext作为依赖项

  return archiveExportCSV;
};

然后在组件中使用这个Hook：

const YourComponent = () => {
  const archiveExportCSV = useArchiveExportCSV();
  const tasks = /* 你的tasks数据 */;

  return (
    <button 
      type="button" 
      className="btn-reset" 
      title="export to .csv" 
      onClick={() => archiveExportCSV(tasks)}
    >
      导出CSV
    </button>
  );
};

3. 将函数定义在组件内部（仅当前组件使用时适用） #

如果这个导出函数只在当前组件中使用，直接把它定义在组件内部即可。这样函数就能直接访问组件中获取的Context值，记得用useCallback包裹，避免组件每次重渲染都创建新的函数实例。

组件内部定义的示例： #

const YourComponent = () => {
  const staticsContext = useContext(StaticsContext);
  const tasks = /* 你的tasks数据 */;

  const archiveExportCSV = useCallback(async (tasks) => {
    // 直接使用组件内的staticsContext
    // ... 你的业务逻辑代码
    Helpers.download(csv,'test.csv','data:text/csv;charset=utf-8');
  }, [staticsContext]);

  return (
    <button 
      type="button" 
      className="btn-reset" 
      title="export to .csv" 
      onClick={() => archiveExportCSV(tasks)}
    >
      导出CSV
    </button>
  );
};

总结 #

• 如果函数只在少数地方调用，手动传参数是最直接且不易出错的方式；
• 如果需要跨组件复用，自定义Hook能帮你优雅地封装Context依赖；
• 尽量避免把Context挂到全局对象上（比如window），这种hack方式会破坏React的数据流，导致代码难以维护和调试。

内容的提问来源于stack exchange，提问作者Jax-p