如何在 React.js 中有效地將子 Props 傳達給父級？

在React.js 中將子Props 傳遞給父級

問題：

是否有簡單的方法來傳遞

揭露不正確的方法：

一些答案​​建議將整個子組件作為參數傳遞給父函數。然而，這種方法有以下幾個原因：

• 不必要的耦合：它將父級和子級緊密耦合，使得在不影響父級的情況下修改子級變得更加困難。
• 缺乏封裝：父級暴露了子級的內部實作細節，違反了封裝原則。

更好的方法：

最佳解決方案是利用父母已經提供給孩子的道具。透過 props 將必要的數據傳遞給子級，父級可以存取和操作該數據，而無需依賴外部機制。

例如：

// Child Component
const Child = ({ onClick, text }) => (
  <button onClick={onClick}>{text}</button>
);

// Parent Component
const Parent = () => {
  const handleChildClick = (e) => {
    // Access and use the prop passed to the child
    alert(`The Child button text is: ${e.target.innerText}`);
  };

  return <Child onClick={handleChildClick} text="Click Me" />;
};

這種方法遵循 React 的設計理念，保持組件之間清晰的界限並避免不必要的複雜性。

以上是如何在 React.js 中有效地將子 Props 傳達給父級？的詳細內容。更多資訊請關注PHP中文網其他相關文章！