ReactJS - 静态 contextType 属性

更新于 2025/3/24 8:07:17

React 中的 Context API 可帮助我们快速处理和共享整个应用程序的状态。因此，我们将了解如何在 React 类组件中使用静态 contextType 来读取和使用上下文数据。

React 中的 Context 是一种跨组件发送数据的方法，无需将 props 传递到组件树的每个级别。这对于共享主题、用户身份验证或不同组件需要访问的任何全局信息等数据非常有帮助。

语法

const MyContext = React.createContext();

首先，我们需要使用 React.createContext() 创建上下文。这将是我们想要在组件中访问的上下文。

如何使用它?

要使用 Context API，我们可以按照以下步骤 −

首先，我们需要创建上下文。我们可以使用 createContext 函数来创建上下文。
接下来，我们将使用 Context Provider 包装组件树，以便为需要它的组件提供上下文。
要访问函数组件中的上下文值，我们将使用 useContext Hooks(钩子)。要访问类组件中的上下文，我们可以使用静态 contextType 属性。

示例

在此应用中，我们将显示用户是否经过身份验证。因此，我们将有一个应用组件来管理用户身份验证的状态(true 或 false)。它将使用 AuthContext.Provider 向其子组件提供身份验证状态。然后我们将创建一个 AuthStatus 组件，该组件将使用静态 contextType 来访问身份验证上下文。我们将根据用户是否登录显示一条消息。

import React, { createContext, Component } from 'react';

const AuthContext = createContext();
class App extends Component {
   state = {
      isAuthenticated: true,
   };   
   render() {
      return (
         <AuthContext.Provider value={this.state.isAuthenticated}>
         <AuthStatus />
         </AuthContext.Provider>
      );
   }
}
class AuthStatus extends Component {
   static contextType = AuthContext;   
   render() {
      const isAuthenticated = this.context;   
      return (
         <div>
            <h1>User Authentication App</h1>
            {isAuthenticated ? <p>User is logged in</p> : <p>User is not logged in</p>}
         </div>
      );
   }
}

export default App;

输出

因此，我们可以看到用户已登录，因为我们已将 isAuthenticated 状态设置为 true。如果我们将其设置为 false，则将显示"用户未登录"的消息。

示例 − 语言选择应用程序

在此应用程序中，我们将提供一项功能，允许用户选择他们喜欢的语言。因此，我们将有一个应用程序组件。该组件将管理所选语言的状态。并使用 LanguageContext.Provider 向其子组件提供语言状态。然后，我们将有一个名为 LanguageSelector 的组件，该组件将使用静态 contextType 来访问语言上下文。它将呈现一个显示所选语言的简单 UI。

import React, { createContext, Component } from 'react';

const LanguageContext = createContext();
class App extends Component {
   state = {
      language: 'English',
   };   
   render() {
      return (
         <LanguageContext.Provider value={this.state.language}>
            <LanguageSelector />
         </LanguageContext.Provider>
      );
   }
}

class LanguageSelector extends Component {
   static contextType = LanguageContext;   
   render() {
      const language = this.context;   
      return (
         <div>
            <h1>Language Selection App</h1>
            <p>Selected Language: {language}</p>
         </div>
      );
   }
}

export default App;

输出

因此，我们可以看到如上所示的输出，其中所选语言为英语。因此，我们可以根据用户要求更改语言。

具有静态 contextType 的示例 − 类组件

静态 contextType 属性可用于获取类组件中的上下文。我们可以创建一个带有按钮的简单示例，借助它，我们可以在浅色和深色主题之间切换，从而可以动态更改主题。

import React, { Component } from 'react';

// 创建上下文
const ThemeContext = React.createContext();
class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         theme: 'light', // Initial theme is light
      };
   }   
   toggleTheme = () => {
      // 更新上下文值
      this.setState((prevState) => ({
         theme: prevState.theme === 'light' ? 'dark' : 'light',
      }));
   };   
   render() {
      return (
         <ThemeContext.Provider value={this.state.theme}>
         <div>
            <Button onClick={this.toggleTheme}>Toggle Theme</Button>
         </div>
         </ThemeContext.Provider>
      );
   }
}
class Button extends Component {
   
   // 指定上下文
   static contextType = ThemeContext;
   
   render() {
      // 访问上下文值
      const theme = this.context;
      const className = 'button-' + theme;
   
      return (
         <button className={className} onClick={this.props.onClick}>
            {this.props.children}
         </button>
      );
   }
}

export default App;

当我们点击"切换主题"按钮时，主题将在浅色和深色之间动态变化，按钮的样式也会相应变化。