官网文档链接:https://react-dnd.github.io/react-dnd/docs/overview
React DnD 是什么?
React DnD是React和Redux核心作者 Dan Abramov创造的一组React 高阶组件,可以在保持组件分离的前提下帮助构建复杂的拖放接口。
React DnD 的需求
- 默认使用 HTML5 拖放API,但支持
- 不直接操作 DOM
- DOM 和拖放的源和目标解耦
- 融入HTML5拖放中窃取类型匹配和数据传递的想法
React DnD 的特点
专注拖拽,不提供现成组件
React DnD提供了一组强大的原语,但它不包含任何现成组件,而是采用包裹使用者的组件并注入 props 的方式。 它比jQuery UI等更底层,专注于使拖放交互正确,而把视觉方面的效果例如坐标限制交给使用者处理。这其实是一种关注点分离的原则,例如React DnD不打算提供可排序组件,但是使用者可以基于它快速开发任何需要的自定义的可排序组件。
单向数据流
类似于 React 一样采取声明式渲染,并且像 redux 一样采用单向数据流架构,实际上内部使用了 Redux
隐藏了平台底层API的问题
HTML5拖放API充满了陷阱和浏览器的不一致。 React DnD为您内部处理它们,因此使用者可以专注于开发应用程序而不是解决浏览器问题。
可扩展可测试
React DnD默认提供了HTML5拖放API封装,但它也允许您提供自定义的“后端(backend)”。您可以根据触摸事件,鼠标事件或其他内容创建自定义DnD后端。例如,内置的模拟后端允许您测试Node环境中组件的拖放交互。
为未来做好了准备
React DnD不会导出mixins,并且对任何组件同样有效,无论它们是使用ES6类,createReactClass还是其他React框架创建的。而且API支持了ES7 装饰器。
React DnD 的基本概念
Backend
React DnD 抽象了后端的概念,你可以使用 HTML5 拖拽后端,也可以自定义 touch、mouse 事件模拟的后端实现,后端主要用来抹平浏览器差异,处理 DOM 事件,同时把 DOM 事件转换为 React DnD 内部的 redux action。
Item
React DnD 基于数据驱动,当拖放发生时,它用一个数据对象来描述当前的元素,比如{ cardId: 25 }
Type
类型类似于 redux 里面的actions types 枚举常量,定义了应用程序里支持的拖拽类型。
Monitor
拖放操作都是有状态的,React DnD 通过 Monitor 来存储这些状态并且提供查询
Connector
Backend 关注 DOM 事件,组件关注拖放状态,connector 可以连接组件和 Backend ,可以让 Backend 获取到 DOM。
DragSource
将组件使用 DragSource
包裹让它变得可以拖动,DragSource
是一个高阶组件:
DragSource(type, spec, collect)(Component)
参数讲解:
- type: 必填。字符串,ES6符号或返回给定组件的函数props。只有为相同类型注册的 drop targets 才会对此拖动源生成的项目做出反应
- spec:必填。一个普通的JavaScript对象,上面有一些允许的方法。它描述了拖动源如何对拖放事件做出反应。
- collect:必填。收集功能。它应该返回一个普通的对象注入你的组件。它接收两个参数:connect和monitor。
- options:可选的。一个普通的对象。
DropTarget
将组件使用 DropTarget
包裹让它变得可以响应 drop,DropTarget
是一个高阶组件:
DropTarget(type, spec, collect)(Component)
参数讲解:
- type: 必填。字符串,ES6符号或返回给定组件的函数props。此放置目标仅对指定类型的 drag sources 项目做出反应
- spec:必填。一个普通的JavaScript对象,上面有一些允许的方法。它描述了放置目标如何对拖放事件做出反应。
- collect:必填。收集功能。它应该返回一个普通的道具对象注入你的组件。它接收两个参数:connect 和 monitor。
- options:可选的。一个普通的对象。
DragDropContext & DragDropContextProvider
注意: 使用 DragSource 和 DropTarget 包裹的组件,必须放在: DragDropContext 包裹的根组件内部,或者 DragDropContextProvider 根标签的内部。
DragDropContext
使用 DragDropContext
包装应用程序的根组件以启用 React DnD
参数
- backend:必填。一个 React DnD 后端。除非您正在编写自定义的,否则建议使用 React DnD 附带的 HTML5Backend。
- context:backend 依赖。用于自定义后端的上下文对象。例如,HTML5Backend可以为iframe场景注入自定义窗口对象。
DragDropContextProvider
作为 DragDropContext
的替代方法,您可以使用 DragDropContextProvider
元素为应用程序启用React DnD。与 DragDropContext
类似,这可以通过 backendprop
注入后端,但也可以注入一个 window
对象。
参数
- backend:必填。一个 React DnD 后端。除非您正在编写自定义的,否则建议使用 React DnD 附带的 HTML5Backend。
- context:backend 依赖。用于自定义后端的上下文对象。例如,HTML5Backend可以为iframe场景注入自定义窗口对象。