【React】useContext 使用

如果需要在组件之间共享状态，可以使用useContext()。

先用vite搭建一个react项目（这玩意是真的快…）目录如下：

App.jsx

import React from 'react'
import './App.css'
import Navbar from './components/Navbar'
import Messages from './components/Messages'

export const AppContext = React.createContext({});
function App() {
  return (
    <AppContext.Provider value={{
      username: 'xxxxxxxxxx'
    }}>
      <div className="App">
        <Navbar />
        <Messages />
      </div>
    </AppContext.Provider>
  )
}

export default App

Navbar.jsx

import React, { useContext } from 'react'
import { AppContext } from '../App'

function Navbar(p) {
  const { username } = useContext(AppContext);
  return (
    <div>
      {username}
    </div>
  )
}

export default Navbar

思路

• 使用React的createContext方法创建一个context上下文，并将其导出
• 将需要共享状态的组件用 上下文中的Provider标签包裹
• 子组件引入context上下文并作为useContext的参数
• 取出共享值