prop drilling & onEvent vs. handleEvent 命名慣例處理方式

前提

• 根據討論，上層元件傳入一個 handler 給 下層元件的 onEvent props 會希望使用 ==onEvent={handleEvent} 的命名慣例==
  • 「on」 表示這是一個事件，「handle」 表示這是一個處理該事件的函數
  • 「on」 命名的 props 用於表示「子組件需要父組件處理的事件」，而 「handle」 命名的方法則用於「父組件對這些事件的處理」
• 這個慣例在單層上傳下的時候可以維持，但如果碰到上層傳次層，再傳最下層時， GrandParent 要傳給 Child 的中間層 Parent 就會破壞這個慣例
• 若只往下傳兩次就要動用 context 的話太過麻煩

範例程式碼 (不符合團隊慣例的原寫法)

import React from "react";

const Child = ({ onSpecialClick }) => {
  return <button onClick={onSpecialClick}>Click Me</button>;
};

const Parent = ({ onSpecialClick }) => {
  return <Child onSpecialClick={onSpecialClick} />;
};

const GrandParent = () => {
  const handleSpecialClick = () => {
    console.log("Button clicked.");
  };

  return <Parent onSpecialClick={handleSpecialClick} />;
};

export default GrandParent;

解法

==我們在 Parent 接受到的 onClick 重新包裝在 handleSpecialClick 裡面，再繼續傳給 Child==，這樣或許看起來有點多餘，但是在功能比較複雜的情況下也可以進一步根據 state 或是其他參數重新包裝

import React from "react";

// 最後一層可以視情況

// 如果需要進行額外加工
const Child = ({ onSpecialClick }) => {
  const handleSpecialClick = () => {
    // do something else
    onSpecialClick();
  };
  return <button onClick={handleSpecialClick}>Click Me</button>;
};

// 直接傳入
const Child = ({ onSpecialClick }) => {
  return <button onClick={onSpecialClick}>Click Me</button>;
};

const Parent = ({ onSpecialClick }) => {
  const handleSpecialClick = () => {
    onSpecialClick();
  };
  return <Child onSpecialClick={handleSpecialClick} />;
};

const GrandParent = () => {
  const handleSpecialClick = () => {
    console.log("Button clicked.");
  };

  return <Parent onSpecialClick={handleSpecialClick} />;
};

export default GrandParent;