ReactJS - static contextType 属性

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

React 中的 Context 是一种在组件之间传递数据的方法，无需通过组件树的每一层传递 props。这对于共享数据（如主题、用户身份验证或不同组件需要访问的任何全局信息）非常有用。

语法

const MyContext = React.createContext();

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

如何使用它？

要使用 Context API，我们可以按照以下步骤操作：

• 首先我们需要创建上下文。我们可以使用 createContext 函数来创建上下文。

• 接下来，我们将使用 Context Provider 包装组件树，以便为需要它的组件提供上下文。

• 要在函数组件中访问上下文的值，我们将使用 useContext hook。要在类组件中访问上下文，我们可以使用 static contextType 属性。

示例

示例

在这个应用程序中，我们将显示用户是否已通过身份验证。因此，我们将有一个 App 组件来管理用户身份验证的状态（true 或 false）。它将使用 AuthContext.Provider 将身份验证状态提供给其子组件。然后，我们将创建一个 AuthStatus 组件，它将使用 static 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，则它将显示消息“用户未登录”。

示例 - 语言选择应用程序

在这个应用程序中，我们将具有允许用户选择其首选语言的功能。因此，我们将有一个 App 组件。此组件将管理所选语言的状态。它还将使用 LanguageContext.Provider 将语言状态提供给其子组件。然后，我们将拥有另一个名为 LanguageSelector 的组件，该组件将使用 static 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;

输出

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

示例 - 使用 static contextType 的类组件

static contextType 属性可用于在类组件中获取上下文。我们可以使用一个按钮创建一个简单的示例，这样我们就可以在亮色和暗色主题之间切换，从而允许我们动态更改主题。

import React, { Component } from 'react';

// Create a context
const ThemeContext = React.createContext();
class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         theme: 'light', // Initial theme is light
      };
   }   
   toggleTheme = () => {
      // Update the context value 
      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 {
   
   // Specify the context
   static contextType = ThemeContext;
   
   render() {
      // Access the context value
      const theme = this.context;
      const className = 'button-' + theme;
   
      return (
         <button className={className} onClick={this.props.onClick}>
            {this.props.children}
         </button>
      );
   }
}

export default App;

当我们点击“切换主题”按钮时，主题将在亮色和暗色之间动态切换，按钮的样式也会相应更改。

总结

static contextType 属性是在 React 类组件中使用上下文的一种简单方法，因为它提供了一种简单的方法来获取上下文信息。如果我们的组件需要，我们可以通过声明上下文来减少代码量。使用 static contextType，我们可以更轻松地维护全局状态并在应用程序中交换数据。