資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
廣告