时间戳

首页 > 解决方案 > 如何将函数传递给 React 中的子组件？

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

问题描述

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

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

标签： javascriptreactjs

解决方案

您只需将该函数作为道具传递给孩子：

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

  return <MyComponent onDragStart={dragStart}/>

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

推荐阅读