如何在普通JS函数中获取React Context值？无需传参实现

我有一个在多个React组件中调用的普通JS函数utilsFn，当前需要从React的WidgetContext中获取contextValue，但每次调用都要从组件中传递该参数。现寻求无需在所有组件中传参，直接在utilsFn内获取该Context值的方法。

原有代码 #

Context定义 #

export const WidgetContext = React.createContext({});
export const useWidgetContext = () => useContext(WidgetContext);

工具函数代码 #

export const utilsFn = (contextValue) => {
   console.log(contextValue)
   return contextValue;
}

组件调用示例 #

Component 1

import { useWidgetContext } from 'WidgetContext';

export default const Comp1 = () => {
  const { contextValue } = useWidgetContext();
  utilsFn(contextValue)
  
  return <></>;
}

Component 2

import { useWidgetContext } from 'WidgetContext';

export default const Comp2 = () => {
  const { contextValue } = useWidgetContext();
  utilsFn(contextValue)
  
  return <></>;
}

解决方案 #

React的Context只能在组件或自定义Hook的顶层通过useContext获取，不能直接在普通JS函数中调用Hook，因此可以通过以下两种方式实现需求：

方法一：将工具函数转为自定义Hook #

直接把utilsFn改造为自定义Hook，在Hook内部获取Context值，组件调用时无需传参：

// 改造后的自定义Hook
import { useWidgetContext } from './WidgetContext';

export const useUtilsFn = () => {
  const { contextValue } = useWidgetContext();

  return () => {
    console.log(contextValue);
    return contextValue;
  };
};

组件调用示例：

// Comp1组件
import { useUtilsFn } from './utils';

export default const Comp1 = () => {
  const utilsFn = useUtilsFn();
  utilsFn(); // 无需传递contextValue
  
  return <></>;
};

方法二：保持普通函数，用Hook封装调用逻辑 #

如果希望保留utilsFn作为普通函数，可以封装一个自定义Hook来获取Context，再自动传递给工具函数：

// 保留原utilsFn不变
export const utilsFn = (contextValue) => {
  console.log(contextValue);
  return contextValue;
};

// 封装调用逻辑的Hook
import { useWidgetContext } from './WidgetContext';
import { utilsFn } from './utils';

export const useExecuteUtilsFn = () => {
  const { contextValue } = useWidgetContext();
  
  return () => utilsFn(contextValue);
};

组件调用示例：

// Comp2组件
import { useExecuteUtilsFn } from './hooks';

export default const Comp2 = () => {
  const utilsFn = useExecuteUtilsFn();
  utilsFn(); // 无需传参
  
  return <></>;
};

注意事项 #

• 必须遵守React Hook规则：只能在组件或自定义Hook的顶层调用useContext，不能在普通JS函数、循环、条件判断中调用。
• 两种方案都能避免在每个组件中手动传递contextValue，减少重复代码。

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