如何將 function 傳遞給 React 中的子組件？

Question

這是我的代碼所在的位置： https://codesandbox.io/embed/elegant-flower-ouoe1?fontsize=14&hidenavigation=1&theme=dark

我有一個名為 Draggable 的組件。 我希望這個組件包含拖動其子組件的所有邏輯。 但我希望子組件有一個按鈕來開始和結束拖動。 如何通過我的子組件 function 來執行此操作。 目前可以拖動子組件，但您可以從任何地方開始拖動。 我想要它，所以你必須將它從紅色圓圈中拖出來（參見代碼）。

Answer 1

您只需將 function 作為道具傳遞給孩子：

  const dragStart = () => {
    // TODO
  }

  return <MyComponent onDragStart={dragStart}/>

所以你的邏輯將在dragStart function 的父級中，孩子們可以使用props.onDragStart()