useContext的使用
需要在组件之间共享状态,可以使用useContext()
使用方法如下:
import React, { useContext } from "react";
import ReactDOM from "react-dom";
//父组件上使用React的Context API,在组件外部建立一个Context。
const TestContext= React.createContext({});
//组件1
const Navbar = () => {
//useContext()钩子函数用来引入Context对象,从中获取username属性
const { username } = useContext(TestContext)
return (
<div className="navbar">
<p>{username}</p>
</div>
)
}
//组件2
const Messages = () => {
//useContext()钩子函数用来引入Context对象,从中获取username属性
const { username } = useContext(TestContext)
return (
<div className="messages">
<p>1 message for {username}</p>
</div>
)
}
function App() {
return (
//TestContext.Provider提供了一个Context对象,该对象是可以被子组件共享的
<TestContext.Provider
value={{
username: 'superawesome',
}}
>
<div className="test">
<Navbar />
<Messages />
</div>
<TestContext.Provider/>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);