如何将 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()