如何在纯typescript类组件(.ts)中使用useContext ?

Question

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

Answer 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>
);
}
}