React Beautiful Dnd（RBD） 的使用

category
Web
date
Dec 13, 2022
icon
slug
react-rbd
status
Published
summary
React-Beautiful-DND，一个强大的拖拽包，能够优雅的做出丰富的拖拽页面应用，适用于列表之间拖拽的场景，支持移动端，且简单易上手。
tags
React
DND
type
Post

React Beautiful DND

Storybook
Storybook
https://react-beautiful-dnd.netlify.app/
 

核心概念

notion image

DragDropContext

构建一个可以拖拽的范围，把你想能够拖放的 react 代码放到 DragDropContext 中。
支持的事件：
  • onDragStart：拖拽开始回调
  • onDragUpdate：拖拽中的回调
  • onDragEnd：拖拽结束时的回调

onDragEnd

回调会返回拖拽结果

Droppable

构建一个可以被拖拽放入的区域块。
  • DroppableId： 此属性是必须的，用于唯一标识，不要更改此 ID。
  • direction：vertical（垂直拖拽，默认）/ horizontal（水平拖拽）
  • type：指定可以被拖动的元素 class
Droppable 的 React 子元素必须是返回 ReactElement 的函数。该函数提供了两个参数：provided 和 snapshot：
  • provided.innerRef: 必须绑定到 ReactElement 中最高的 DOM 节点。
  • provided.droppableProps: Object，包含需要应用于 Droppable 元素的属性,包含一个数据属性，可以用它来控制一些不可见的 CSS
  • provided.placeholder: 占位符
  • snapshot： 当前拖动状态，可以用来在被拖动时改变 Droppable 的外观。

Draggable

可被拖拽的元素
<Draggable /> 必须始终包含在 <Droppable /> 中，可以在 <Droppable /> 内重新排序 <Draggable /> 或移动到另一个 <Droppable />
  • draggableId：string，必需，作为唯一标识符。
  • index：number，匹配 Droppable 中 Draggable 的顺序。是列表中 Draggable 的唯一索引，索引数组必须是连续的，比如 [0,1,2]。
  • isDragDisabled： 默认 false，一个可选标志，用于控制是否允许 Draggable 拖动。
  • 其他同 <Droppable />。
 

例子

 

高级：模块化

Drop & Drag

Reorder 排序算法

Code

 

Error

1. Droppable 和 Draggable 组件的 provided.innerRef 属性只能直接绑定 HTML Element，如果用在封装的组件中，则变成获取组件的实例，将抛出错误

解决方法：
  • 在顶层用一层 div 覆盖
  • 将封装组件用 forwardRef 包裹

2. Unable to find draggable with id: X

If you are getting this error on React 18
Try removing StrictMode
 
 
 
参考链接：
  1. React 实用库：react-beautiful-dnd - 掘金 (juejin.cn)
  1. javascript - React beautiful DND - I get "Unable to find draggable with id: 1" - Stack Overflow
 

© JinSo 2021 - 2026