Question

我在这样的常规组件中使用上下文时没有问题：

import { LanguageContext } from "./languageContext";


export class Jobs extends React.Component {
  constructor(props) {
    super(props);
.
.
.
{this.context.main.title}
.
.
.


Jobs.contextType = LanguageContext;

但是，当涉及到我的功能组件时，这使我犯了一个错误

“无法读取未定义的属性上下文”


import { LanguageContext } from "./languageContext";

function StripeButton() {
...
StripeButton.contextType = LanguageContext;

...
{this.context.main.title}
...

我该如何做？

Answer 1

您不能在功能组件中定义contextType。要在功能组件中使用上下文，您需要使用react {p1.8.0或更高版本中可用的useContext钩子

import { LanguageContext } from "./languageContext";

function StripeButton() {
    const context = useContext(LanguageContext);
    ...
      {context.main.title}
    ...
};

如何在我的功能组件上使用上下文？

1 个答案: