reactdnd的用法是什么

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

使用方法

安装

安装的时候我们需要同时安装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：选填，收集功能。

《react视频教学》