ReactJS - 静态 contextType 属性

上一页
下一页

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

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

语法


const MyContext = React.createContext();

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

如何使用它？

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

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

例子

在此应用程序中，我们将显示用户是否经过身份验证。因此，我们将有一个 App 组件，它将管理用户身份验证的状态（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，则它将显示“用户未登录”的消息。

示例 - 语言选择应用程序

在此应用程序中，我们将具有允许用户选择他们首选语言的功能。因此，我们将有一个 App 组件。此组件将管理所选语言的状态。并且还使用 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';

// 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;

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

总结

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

本页
上一页
下一页