Skip to main content

Context

什麼是Context​

  • 一種在不同元件之間共享全局數據資料的方法，將prop傳遞到元件樹中需要資料的子元件，而無需將 prop 傳遞到每個層别元件中
  • Context.Provider提供應用程序式的prop中的變量，透過value屬性，將傳遞的數據資料傳入內部的子元件
  • 當子元件需要使用父元件內Context的值時，則透過useContext()取得資料

建立Context​

import { useEffect, createContext, useContext, useState} from 'react';

  //createContext
  export const MyContext = createContext();
  
  const App = () => {
    const [dptID,setDptID] = useState();
  
    //Rendering ========================================
    return (  
      <MyContext.Provider value={{dptID, setDptID}}>
      <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/' element={<Profile />} />
      </Routes>
      </BrowserRouter>
      </MyContext.Provider>
      );
  }
  
  export default App;

使用Context​

import { useContext, useEffect, useState } from "react";
//context
import { MyContext } from "../App";
const Home = () => {
  //useContext
  const { dptID, setDptID } = useContext(MyContext);
}
export default Home;