构造函数中未定义的上下文 - 反应

Question

export default class Printer extends React.PureComponent<PrinterProps> {
    static contextType = PrinterContext;

    constructor(props: PrinterProps, context: PrinterInterface){
        super(props, context);
        this.PrinterInfo = getPrinterInfo(this.context);
}

我需要将上下文传递给 super 以便能够在构造函数中访问它。

他们最新的文档中没有将上下文传递给构造函数 -

https://reactjs.org/docs/context.html

但它存在于遗留 api 文档中。

https://reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods

由于在版本 17 及更高版本中将弃用将上下文传递给 super，有什么方法可以在构造函数中将上下文传递给 super 来访问上下文？

谢谢！

Answer 1

由于将 react 上下文传递给 super 将很快被弃用，您将无法在构造函数中使用上下文。另一点是，我已经看到功能组件是创建组件的更优选方式（这是一个高度讨论的话题） 我会推荐使用功能组件，然后简单地使用 useEffect 或 useContext 钩子，如果它在整体情况下有意义的话。

您也可以在 class 组件中采用相同的方法，例如。使用 React 生命周期方法 componentDidMount() 因为上下文在组件安装后可用，所以此生命周期方法使用上下文并在其中调用方法 getPrinterInfo() 是有意义的。

如果你不打算将 React 更新到 17，你可以使用你编写的代码，因为它可以工作，但是如果你想在将来更新 React 并想使用它，请关注另一个方法。

export default class Printer extends React.PureComponent<PrinterProps, State> {
    static contextType = PrinterContext;
    context!: React.ContextType<typeof PrinterContext>;

    constructor(props: PrinterProps){
        super(props);
    }

    componentDidMount() {
        this.getPrinterInfo();
    }

    getPrinterInfo = () => {
        // you should have access to this.context
    }
}