如何在旧的反应组件中使用上下文？答案

【问题标题】：how to useContext in old react component?如何在旧的反应组件中使用上下文？
【发布时间】：2021-01-22 12:28:13
【问题描述】：

如何在旧的反应组件中使用上下文？它在打印时显示一个空的 {}

import { UserContext } from "../../firebase/user";

export class CreateProduct extends Component {
    static context = UserContext;
    render() {
        console.log(this.context)
    }
}

【问题讨论】：

这能回答你的问题吗？ React - useContext inside class
OP 试图在一个类中使用 Context，而不是使用钩子 useContext。

标签： javascript reactjs

【解决方案1】：

您需要将 static context 重命名为 static contextType。请参考docs：

可以为类的 contextType 属性分配一个由 React.createContext() 创建的 Context 对象。这使您可以使用 this.context 使用该上下文类型的最接近的当前值。您可以在包括渲染函数在内的任何生命周期方法中引用它。

【讨论】：

【解决方案2】：

可以为类的 contextType 属性分配一个由 React.createContext() 创建的 Context 对象。这使您可以使用 this.context 使用该上下文类型的最接近的当前值。您可以在包括渲染函数在内的任何生命周期方法中引用它。

import { UserContext } from "../../firebase/user";

export class CreateProduct extends Component {
    static contextType = UserContext;
    render() {
        console.log(this.context)
    }
}

【讨论】：

您能补充说明吗？
@CristianTraìna 我已经添加了。