本文详解如何解决 react-grid-layout 嵌套使用时子网格拖拽事件冒泡导致父级网格失活的问题，通过 e.stoppropagation() 阻断事件传播，实现各层级拖拽互不干扰。
本文详解如何解决 react-grid-layout 嵌套使用时子网格拖拽事件冒泡导致父级网格失活的问题，通过 e.stoppropagation() 阻断事件传播，实现各层级拖拽互不干扰。
在使用 react-grid-layout 构建深度嵌套布局（如仪表盘中“容器组件嵌套子容器”）时，一个常见痛点是：子网格的拖拽操作会意外触发父网格的拖拽逻辑，导致父级元素暂时无法被拖动，直到中间某层完成一次拖拽。根本原因在于 onDragStart 事件默认会向上冒泡，而外层 <GridLayout> 捕获到该事件后，可能误判为自身区域被拖拽，从而干扰其自身的拖拽状态管理。
原方案尝试用 isDraggable 状态控制外层可拖性，但存在严重缺陷：它依赖于手动同步父子状态（如 setIsDraggable(false)），而嵌套层级越深，状态耦合越紧、时序越难保证，最终表现为“必须先拖动第 n-1 层，第 n 层才能拖，第 n+1 层又失效”等不可预测行为。
✅ 正确解法是从事件机制层面切断干扰源——在每一层 <GridLayout> 的 onDragStart 回调中，显式调用 event.stopPropagation()：
<GridLayout
className="layout"
onDragStart={(layout, oldItem, newItem, placeholder, e) => {
e.stopPropagation(); // ✅ 关键：阻止事件冒泡至父 Grid
}}
onDragStop={onDragStop}
layout={layout}
cols={24}
rowHeight={80}
width={1600}
>
{/* 子元素渲染逻辑 */}
</GridLayout>? 注意：react-grid-layout 的 onDragStart 回调第五个参数 e 是原生 DragEvent 对象（非 React 合成事件），因此支持标准 DOM 方法 stopPropagation()。若省略该参数或未正确调用，事件仍将冒泡。
同时，无需再维护 isDraggable 状态。因为：
- 每层 <GridLayout> 默认 isDraggable={true}，且仅响应自己区域内的拖拽；
- 事件被精准拦截后，父层不会收到子层的拖拽信号，自然保持自身拖拽能力始终可用；
- 代码更简洁、状态更纯粹、行为更可预测。
? 额外建议：
- 若需区分不同层级的拖拽行为（如仅允许顶层移动、子层仅调整大小），可在 onDragStart 中结合 item.i 或 layout 结构做条件判断，再决定是否 stopPropagation()；
- 所有嵌套 <CustomLayout> 组件应统一应用该模式，确保任意深度均生效；
- 测试时建议在 CodeSandbox 中验证三层以上嵌套（如根 → 容器A → 子面板B → 内嵌卡片C），确认 C 层拖动不影响 A 和根层响应。
至此，你已获得一套健壮、可扩展的嵌套网格拖拽方案：无状态污染、无事件干扰、开箱即用。
