【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 最需要搞懂的一点！