React - 元件之間的通訊

子元件向父元件通訊

• 子元件呼叫 prop 函式，並傳值。
• 父元件傳遞 prop 函式，透過回撥函式獲取值。

本質是透過回撥函式進行子向父通訊，子元件透過觸發由父元件傳遞的 prop 函式，父元件執行該 prop 函式內的回撥函式。

file:[子元件向父元件通訊]
function Son({ onGetMsg }) {
  // 1. 資料由子元件提供，向父元件傳值
  const sonMsg = "this is son msg";

  return (
    <div>
      this is Son
      <!-- 2. onClick 觸發 prop 函式，將值傳遞給它 -->
      <button onClick={() => onGetMsg(sonMsg)}>sendMsg</button>
    </div>
  );
}

function App() {
  // 3. 傳遞給子元件，觸發時執行回撥函式，msg 獲取值
  const getSonMsg = (msg) => {
    console.log(msg);
  };

  return (
    <div>
      <Son onGetMsg={getSonMsg} />
    </div>
  );
}

export default App;

巢狀元件之間通訊

• 透過 createContext 建立上下文物件。
• 頂層元件透過 <Context.Provider></Context.Provider/> 包裹，並提供 value。
• 需要的元件中透過 useContext 獲取值。

file:[巢狀元件通訊]
import { createContext, useContext } from "react";

const Context = createContext();

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

function B() {
  const ctx = useContext(Context);
  return <div>this is B component.{ctx}</div>;
}

function App() {
  const msg = "this is a app msg.";
  return (
    <div>
      <Context.Provider value={msg}>
        <A />
      </Context.Provider>
    </div>
  );
}

export default App;