react的dnd怎么用(dnd,react,web开发)

react dnd用于构建复杂的拖放界面，并保持组件之间的耦合，是一组react高阶组件；使用时只需用对应的API将目标组件包裹，即可实现拖动或接受拖动元素的功能；不需要判断拖动状态，只需在传入的spec对象中各个状态属性中做对应处理即可。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react dnd的用法是什么

React-DnD是一组React实用程序，可帮助您构建复杂的拖放界面，同时保持组件之间的耦合。它非常适合Trello和Storify之类的应用程序，其中拖动可在应用程序的不同部分之间传输数据，并且组件可以响应拖放事件更改其外观和应用程序状态。

如上图的团队任务合作平台很多公司都在使用。React-DnD是这一类业务场景的优秀开源解决方案。

接下来我们先介绍一下它的使用方法。

使用方法

安装

安装的时候我们需要同时安装backend与react-dnd。

为什么与要这样设计呢，后面源码解析的时候会详细说明。

DndProvider注入

DndProvider组件为您的应用程序提供React-DnD功能。必须通过backendc参数将其注入后端，但是也可以将其注入window对象。

backend后端是React-DnD中非常好的一种设计方法。可以理解为具体拖拽的实现方式。

DndProvider api

• backend: 必填，dnd后端可以使用官方的提供的两个 HTML5Backend or TouchBackend，或者也可以自己写backend后端。

• context: 选填，用户配置后端的上下文，这取决于后端的实现。

• options: 配置后端对象，自定义时可以传入backend。后面有例子。

useDrag 声明拖动源

userDrag用于将当前组件用作拖动源的钩子。

其中useDrag返回的参数有

• arguments[0]: 一个对象，其中包含从collect函数收集的属性。如果collect未定义函数，则返回一个空对象。

• arguments[1]: 拖动源的连接器功能。这必须附加到DOM的可拖动部分。

• arguments[2]: 用于拖动预览的连接器功能。这可以附加到DOM的预览部分。

然后useDrag传入的参数有

• item: 必填。一个普通的JavaScript对象，描述了要拖动的数据。这是可用于放置目标的有关拖动源的唯一信息

• item.type: 必填，并且必须是字符串，ES6符号。只有注册为相同类型的放置目标才会对此项目做出反应

• previewOptions: 选填。描述拖动预览选项的普通JavaScript对象

• options: 选填，一个普通的对象。如果组件的某些道具不是标量的（即不是原始值或函数），则arePropsEqual(props, otherProps)在options对象内部指定自定义函数可以提高性能。除非您有性能问题，否则不要担心。

• begin(monitor)：选填，拖动操作开始时触发。不需要返回任何内容，但是如果返回对象，它将覆盖item规范的默认属性。

• end(item, monitor)：选填，拖动停止的时候，end将会被调用。

• canDrag(monitor)：选填。使用它可以指定当前是否允许拖动。默认允许

• isDragging(monitor)：选填。默认情况下，只有启动拖动操作的拖动源才被视为拖动

collect：选填，收集功能。