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

纯TypeScript组件（包括类组件）完全支持使用React Context，下面是具体的实现步骤和代码示例：

1. 确保Context有正确的TypeScript类型定义 #

首先要给Context定义明确的类型，避免后续使用时出现类型错误：

import React from 'react';

// 定义Context的结构类型
interface AppContextType {
  user: { name: string; id: number } | null;
  setUser: (user: AppContextType['user']) => void;
}

// 创建Context并指定类型，同时提供符合类型的默认值
export const AppContext = React.createContext<AppContextType>({
  user: null,
  setUser: () => {},
});

2. 在类组件中使用Context的两种方式 #

方式一：使用static contextType（推荐类组件使用） #

通过声明static contextType将组件与Context关联，之后可以直接通过this.context访问上下文值：

import React from 'react';
import { AppContext } from './AppContext';

class Profile extends React.Component {
  // 关联目标Context
  static contextType = AppContext;
  // 给context添加类型注解，确保TS能正确推断类型
  context: React.ContextType<typeof AppContext>;

  render() {
    const { user, setUser } = this.context;

    return (
      <div>
        {user ? (
          <p>Welcome, {user.name}!</p>
        ) : (
          <button onClick={() => setUser({ name: 'John Doe', id: 1 })}>
            登录
          </button>
        )}
      </div>
    );
  }
}

方式二：使用Context.Consumer #

如果需要在组件的某个局部访问Context，或者需要同时访问多个Context，可以使用Consumer组件：

import React from 'react';
import { AppContext } from './AppContext';

class Profile extends React.Component {
  render() {
    return (
      <AppContext.Consumer>
        {(context) => {
          const { user, setUser } = context;
          return (
            <div>
              {user ? (
                <p>Welcome, {user.name}!</p>
              ) : (
                <button onClick={() => setUser({ name: 'John Doe', id: 1 })}>
                  登录
                </button>
              )}
            </div>
          );
        }}
      </AppContext.Consumer>
    );
  }
}

3. 确保组件被Context Provider包裹 #

无论哪种使用方式，类组件都必须被对应的Context.Provider包裹，才能获取到正确的上下文值：

import React from 'react';
import { AppContext } from './AppContext';
import Profile from './Profile';

class App extends React.Component {
  state = {
    user: null,
  };

  setUser = (user: AppContextType['user']) => {
    this.setState({ user });
  };

  render() {
    return (
      <AppContext.Provider value={{ user: this.state.user, setUser: this.setUser }}>
        <Profile />
      </AppContext.Provider>
    );
  }
}

export default App;

内容的提问来源于stack exchange，提问作者Dinesh V