React 16：从功能组件外部访问上下文

Question

我正在使用React 16并尝试使用React钩子来访问上下文。

const { locale } = React.useContext(LocaleContext);

此挂钩调用是在Redux中间件中完成的。然后我得到错误 Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.

我可以从功能组件外部访问上下文吗？

Answer 1

在React组件外部不能使用钩子。如果您确实需要访问redux内部的语言环境，则可以在某个地方保留对它的外部引用：

let globalLocale;

// inside a component
function MyComponent() {
  const {locale} = React.useContext(LocaleContext);
  globalLocale = locale;
}

或者您可以通过操作在redux中添加语言环境（例如，在LocaleContext内部进行更改）

// inside LocaleContextProvider somewhere, when locale updates 
dispatch({type: 'SET_LOCALE', payload: locale});

您将能够像其他任何值一样在redux中访问它。