javascript - useContext 仅适用于无状态功能组件

Question

我正在尝试掌握 React 中新的 useContext 函数。在无状态功能组件中效果很好。例如:

import React from 'react';
import LocaleContext from '../LocaleContext';

const Link = ({ text, url }) => {
  const locale = useContext(LocaleContext);

  return (
    <a href={`/${locale}/${url}`}>
      {text}
    </a>
  );
};

export default Link;

我还想在有状态组件甚至非 React 函数中使用 useContext，但是当我这样做时，出现以下错误:

Hooks 只能在函数组件的内部调用。

这个消息看似简单易懂，但这是真的吗？我只能在无状态功能组件中使用它吗？如果是这样，对我来说似乎毫无意义，因为使用简单的 HOC 或传统方法非常容易:

<Locale Consumer>
  {locale => (
    ...
  )}
</LocaleConsumer>

那么这里有什么？我的项目中每个包都有最新版本。不确定这是否重要，但我正在此处开发 NextJS 网站。

Answer 1

如果你真的想使用类(我实际上来自 Angular，我仍然更喜欢使用类)你可以像这样轻松解决:

class ComponentImpl extends React.Component<any> {
  constructor(props?) {
    super(props);
  }

  render() {
    return (
      <div>
        CounterButton: <button onClick={() => {this.props.appContext.setCount(this.props.appContext.count + 5)}}>App Counter + 5</button>
      </div>
    )
  }
}

export function Component() {
  let appContext = useContext(AppContext);

  return <ComponentImpl appContext={appContext}></ComponentImpl>
};

你只需使用它:<Component></Component>