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

Posted 2023-04-14

【中文标题】如何在旧的反应组件中使用上下文？

【英文标题】：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。

【参考方案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 我已经添加了。