getHandlerId() 有什么作用以及如何使用它？答案

【问题标题】：What does getHandlerId() do and how to use it?getHandlerId() 有什么作用以及如何使用它？
【发布时间】：2022-11-11 12:02:52
【问题描述】：

一些react-dnd 示例使用getHandlerId() 方法。

例如，在可排序列表的简单示例中，Card.tsx 函数：

从useDrop 方法中的monitor 对象收集handlerId

collect(monitor) {
  return {
    handlerId: monitor.getHandlerId(),
  }
},

使用它来初始化名为 data-handler-id 的 HTML 属性

<div ref={ref} style={{ ...style, opacity }} data-handler-id={handlerId}>

这个 ID 是什么，为什么要使用它？

什么使用data-handler-id 属性？

我希望看到 API 文档中将getHandlerId() 描述为DropTargetMonitor 的一种方法（但事实并非如此）。

【问题讨论】：

标签： react-dnd

【解决方案1】：

我没有深入研究它，但对我来说，这些信息足以继续使用它：

如果删除此 data-handler-id，一切都会继续工作，但会出现一些问题（项目有时会闪烁，它不会像使用 data-handler-id 那样顺利地转到另一个地方）
这是一个关于性能低下的未解决问题https://github.com/react-dnd/react-dnd/issues/2621，此评论建议使用处理程序 ID：https://github.com/react-dnd/react-dnd/issues/2621#issuecomment-847316022
正如您在代码https://github.com/react-dnd/react-dnd/search?q=handlerId&type=code 中看到的那样，处理程序ID 用于正确定义放置项，因此即使您没有很多元素，使用它似乎也更好。

【讨论】：