【React】元件通訊 - 跨層通訊

元件通訊 - 跨層通訊

實現方式

• 使用 centext 機制

實現步驟

• 使用 createContext 方法建立一個上下文物件Ctx
• 在頂層元件（如App，即提供資料方）中透過 Ctx.Provider 元件提供資料
• 在底層元件（B）中透過 useContext 鉤子函式獲取消費資料

示例

import { createContext, useContext } from "react"

// 1. 使用 creatContext 建立一個上下文物件
const MsgContext = createContext()

function A() {
  return (
    <div>
      this is A component,
      <B />
    </div>
  )
}

function B() {
  // 3. 在底層元件，透過 useContext 鉤子函式使用時資料
  const msg = useContext(MsgContext)
  return (
    <div>
      this is B component,{msg}
    </div>
  )
}

function App() {

  const msg = 'this is app msg'

  // 2. 在頂層元件透過 Provider 元件提供資料
  return (
    <div>
      <MsgContext.Provider value={msg}>
        this is App
        <A />
      </MsgContext.Provider>
    </div>
  );
}

export default App;