【React】- React-RND 深度使用指南：实现自由拖拽、避坑受控陷阱！

🚀 React-RND 深度使用指南：实现自由拖拽、避坑受控陷阱！

在开发一个 PDF 编辑器功能模块时，我需要实现 在页面中拖动二维码标记区域的位置。起初使用 react-rnd 看似简单，然而随着组件层级加深，状态管理复杂化，拖动坐标无法更新、组件“弹回原位”等问题层出不穷。

这篇文章结合我的真实踩坑过程，手把手带你理解 react-rnd 的核心机制，以及如何正确选择模式（default vs position），避免常见 bug。

---

📦 1. 什么是 React-RND？

react-rnd 是一个基于 React 的“可拖拽、可缩放”的组件库，封装了拖拽逻辑并支持：

• 拖拽元素自由移动 ✅
• 控制拖拽边界（bounds） ✅
• 可选尺寸调整（resizable） ✅
• 支持受控/非受控两种使用模式 ✅

它广泛应用于看板组件、PDF 编辑器、图片标注等场景。

---

⚙️ 2. 快速上手 Demo

import { Rnd } from 'react-rnd';<Rnddefault={{x: 100,y: 100,width: 200,height: 200,}}bounds="parent"enableResizing={false}onDragStop={(e, d) => {console.log('新位置：', d.x, d.y);}}
><div>二维码区域</div>
</Rnd>

---

🔍 3. position vs default：傻傻分不清？

这是你使用 react-rnd 最需要搞懂的一点！

<

属性	default	position
是否受控	❌ 非受控	✅ 受控
拖动时组件位置	自动变	必须手动变（你更新状态）
onDragStop 中的 d.x/y 会更新吗？	✅ 会