您可以使用 useContext 挂钩来实现此目的。在 Provider 的子元素中使用它非常容易。举个例子...
authContext.js
import { createContext } from "react";
const authContext = createContext({
authenticated: false,
setAuthenticated: (auth) => {}
});
export default authContext;
Login.js(使用 Context 的组件)
import React, { useContext } from "react";
import authContext from "./authContext";
export default () => {
const { setAuthenticated } = useContext(authContext);
const handleLogin = () => setAuthenticated(true);
const handleLogout = () => setAuthenticated(false);
return (
<React.Fragment>
<button onClick={handleLogin}>login</button>
<button onClick={handleLogout}>logout</button>
</React.Fragment>
);
};
最后是index.js
import ReactDOM from "react-dom";
import React, { useState } from "react";
import authContext from "./authContext";
import Login from "./Login";
const App = () => {
const [authenticated, setAuthenticated] = useState(false);
return (
<authContext.Provider value={{ authenticated, setAuthenticated }}>
<div> user is {`${authenticated ? "" : "not"} authenticated`} </div>
<Login />
</authContext.Provider>
);
};
ReactDOM.render(<App />, document.getElementById("container"));
正如您所看到的,使用 useContext 挂钩使用存储在上下文中的数据变得非常容易。当然,与每个 React hook 一样,它仅适用于功能组件。
如果你想看到代码工作。https://codesandbox.io/s/react-playground-forked-wbqsh?file=/index.js https://codesandbox.io/s/react-playground-forked-wbqsh?file=/index.js