useContext的使用

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