React 拖放当前组件上下文答案

【问题标题】：React Drag & Drop current component contextReact 拖放当前组件上下文
【发布时间】：2018-01-08 18:31:55
【问题描述】：

任何使用过 React Drag & Drop 的人，需要帮助！

在第 20 行的这个示例 (https://github.com/react-dnd/react-dnd/blob/master/examples/01%20Dustbin/Multiple%20Targets/Dustbin.js#L20) 中，有 props.onDrop(monitor.getItem()); 这个代码，其中函数 onDrop 通过 props 传递给组件 Dustbin 被调用。

我需要知道是否有一种方法可以调用Dustbin 中定义的方法，而不是通过 props 传递。

例如：this.onDrop(monitor.getItem()); 或 currentComponent.onDrop(monitor.getItem());

【问题讨论】：

【解决方案1】：

是的，drop 的第三个参数是“组件”（参见此处：http://react-dnd.github.io/react-dnd/docs-drop-target.html），它是实际放入的组件。所以你可以这样做：

const dustbinTarget = {
  drop(props, monitor, component) {
    component.onDrop(monitor.getItem());
  },
};

此参数可用于除 canDrop 之外的所有放置目标方法，因为实例在调用时可能不可用。

【讨论】：