react-dnd 是什么?
干嘛用?
如何使用?
在什么情况下使用?
一、概念
React DnD 是一组 React 高阶组件,使用的时候只需要使用对应的 API 将目标组件进行包裹,即可实现拖动或接受拖动元素的功能。将拖动的事件转换成对象中对应状态的形式,不需要开发者自己判断拖动状态,只需要在传入的 spec 对象中各个状态属性中做对应处理即可。刚刚接触可能难以理解,真正熟悉用法之后会感觉很方便。
几个概念
- DragSource 用于包装你需要拖动的组件,使组件能够被拖拽(make it draggable)
- DropTarget 用于包装接收拖拽元素的组件,使组件能够放置(dropped on it)
- DragDropContext 用于包装拖拽根组件,DragSource 和 DropTarget 都需要包裹在DragDropContext内
参数说明
DragSource(type, spec, collect)
DropTarget (type, spec, collect)
DragSource和DropTarget各有三个参数
type: 拖拽类型,必填。当 source组件的type 和 target组件的type 一致时,target组件可以接受source组件。
spec: 拖拽事件的方法对象,必填。
collect: 把拖拽过程中需要信息注入组件的 props,接收两个参数 connect and monitor,必填。
二、DragSource:使组件能够被拖拽
使用DragSource
包裹住组件,使其可以进行拖动。