如何将函数传递给 React 中的子组件？

【问题标题】：How to pass function to a child component in React?如何将函数传递给 React 中的子组件？
【发布时间】：2020-06-30 20:36:14
【问题描述】：

我有一个名为 Draggable 的组件。我希望这个组件包含拖动其子组件的所有逻辑。但我希望子组件有一个按钮来开始和结束拖动。如何将我的子组件传递给执行此操作的函数。目前可以拖动子组件，但您可以从任何地方开始拖动。我想要它，所以你必须从红色圆圈中拖动它（见代码）。

【问题讨论】：

【解决方案1】：

你只需要将函数作为道具传递给孩子：

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

  return <MyComponent onDragStart={dragStart}/>

因此，您的逻辑将在 dragStart 函数的父级中，子级可以使用 props.onDragStart() 使用它

【讨论】：

如果我让 Draggable 返回 MyComponent，那么我只能使用 Draggable。我希望能够将 Draggable 与任何组件一起使用。因此，每当我将它包含在我的代码中时，它的子项都可以获得一个开始拖动的函数。
在这种情况下，您可以使用React.Context。看看这里reactjs.org/docs/context.html