wordpress插件原理上海搜索引擎优化1
🔍 深度解析 react-rnd 源码
源码地址：https://github.com/bokuweb/react-rnd
核心依赖：react,react-draggable,re-resizable
🏗️ 1. 组件结构总览
react-rnd 是对两个成熟库的组合封装：
- ✅ react-draggable：处理拖拽行为
- ✅ re-resizable：处理缩放行为
内部结构如下：
<Rnd>└── <Resizable> （来自 re-resizable）└── <DraggableCore>（来自 react-draggable）└── <div className="rnd-content">...</div>
这就是你在 DOM 中看到的结构。Rnd 只是一个壳，核心逻辑全在这两个库中。
⚙️ 2. Rnd 核心 props 说明
💡 关键受控参数
| prop | 说明 |
|---|---|
position | 拖拽位置（受控） |
default | 初始位置和尺寸（非受控） |
size | 尺寸（受控） |
bounds | 拖拽范围限制（字符串或 DOM 元素） |
onDragStop | 拖拽结束回调（给出 x/y） |
onResizeStop | 缩放结束回调（给出 w/h） |
🧠 3. 源码入口分析
源码主文件位于：
📁 src/index.tsx
export class Rnd extends React.PureComponent<RndProps, RndState> {resizable: Resizabl