usedrag和usedrop的区别

没有检索到标题

最新推荐文章于 2025-08-23 13:51:48 发布

原创最新推荐文章于 2025-08-23 13:51:48 发布 · 673 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

react 专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了ReactDnD库中的useDrag和useDropHook，前者使组件可拖动，后者定义可放置区域。它们配合实现完整的拖放功能。

我的GitHub

useDrag 和 useDrop 是 React DnD（拖放）库中的两个主要 Hook。它们分别用于定义可拖动（draggable）和可放置（droppable）的组件。

useDrag

useDrag Hook 用于使一个组件变得可拖动。这意味着用户可以点击、拖动并放置这个组件到其他可放置的区域。当你把 useDrag 应用到一个组件上时，该组件会获得可拖动的属性。

示例：

const [, ref] = useDrag({
  type: "ITEM",
  item: { id: 1 },
});

return <div ref={ref}>Drag Me!</div>;

在这个例子中，当用户点击并拖动这个 div 元素时，它会变得可拖动，并且拖动的数据会包含一个 id。

useDrop

useDrop Hook 则用于定义一个组件作为可放置（droppable）的区域。这意味着其他可拖动的组件可以被放置到这个区域里。

示例：

const [, ref] = useDrop({
  accept: "ITEM",
  drop: (item) => {
    console.log("Dropped item is", item);
  },
});

return <div ref={ref}>Drop Here!</div>;

在这个例子中，div 元素成为一个可放置区域，只接受类型为 "ITEM" 的拖动组件。当一个符合条件的组件被放置到这里时，drop 函数会被调用，并打印出被放置的项。

总结

useDrag 使一个组件变得可拖动。
useDrop 使一个组件变成一个可放置的区域。

两者经常配合使用，以实现完整的拖放功能。