数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究ReactJS 中的 Context API
在本文中，我们将了解如何在不通过基于类的组件中的每个父组件的情况下访问数据。
Context API 用于设置全局数据，现在可以在任何子组件中访问此数据，而无需通过每个父组件传递数据。
示例
假设有三个组件，即 A、B 和 C。A 是 B 的父组件，B 是 C 的父组件。因此，我们的组件结构如下 - A→B→C。
我们在 A 中定义了某些数据，并希望在组件 C 中处理这些数据。所以有两种方法可以处理这个问题 -
通过 B 将此数据传递给 C，这不是一种首选方式。
另一种方法是使用 Context API，它用于集中处理数据，任何组件都可以访问这些数据，而无需将其传递给每个父组件。
此示例中，我们将构建一个身份认证 React 应用程序，该应用程序登录或登出子组件中的用户并相应地更新状态。
我们将构建一个 App 组件，它具有两个用于访问由 Context Provider 提供的状态并相应更新状态的 LogIn 和 LogOut 组件。
AuthContext.js
import React from 'react';
const authContext = React.createContext({
auth: null,
login: () => {},
logout: () => {},
});
export default authContext;App.jsx
import React, { useState } from 'react';
import LogIn from './Login';
import LogOut from './Logout';
import AuthContext from './AuthContext';
const App = () => {
const [auth, setAuth] = useState(false);
const login = () => {
setAuth(true);
};
const logout = () => {
setAuth(false);
};
return (
<React.Fragment>
<AuthContext.Provider
value={{ auth: auth, login: login, logout: logout }}
<p>{auth ? 'Hi! You are Logged In' : 'Oope! Kindly Login'}
<LogIn />
<LogOut />
</AuthContext.Provider>
</React.Fragment>
);
};
export default App;Login.js
import React, { Component } from 'react';
import AuthContext from './AuthContext';
class Login extends Component {
static contextType = AuthContext;
render() {
return (
<div>
<button onClick={this.context.login}>Login</button>
</div>
);
}
}
export default Login;Logout.js
import React, { Component } from 'react';
import AuthContext from './AuthContext';
class Logout extends Component {
static contextType = AuthContext;
render() {
return (
<div>
<button onClick={this.context.logout}>Logout</button>
</div>
);
}
}
export default Logout;输出
将产生以下结果。
更新于： 2021 年 3 月 18 日
1K+ 浏览量
广告