如何在纯打字稿类组件（.ts）中使用 useContext？

【问题标题】：How to use useContext in a pure typescript class component(.ts)?如何在纯打字稿类组件（.ts）中使用 useContext？
【发布时间】：2022-11-28 19:27:35
【问题描述】：

我有一个纯打字稿类组件。我创建了一个可以在任何地方使用的上下文，我想知道如何在 .ts 类组件中使用上下文，然后如果可能的话在纯打字稿组件中使用。

【问题讨论】：

标签： reactjs typescript react-context

【解决方案1】：

您可以使用 context.Consumer 获取类组件中上下文的值。它遵循render-props 模式。

interface ContextProps {
  property1: string;
}

const context = React.createContext<ContextProps | null>(null);

export default class App extends React.Component {
  render() {
    return (
      <div>
        <context.Provider value={{ property1: '123' }}>
          <context.Consumer>
            {({ property1 }) => <div>{property1}</div>}
          </context.Consumer>
        </context.Provider>
      </div>
    );
  }
}

【讨论】：