本文详解 react-beautiful-dnd 在 mui accordion 中嵌套多个动态 droppable 列表时拖拽失效的根本原因，并提供可复用的自定义 accordion + 正确状态管理方案，确保每个列表独立响应拖拽操作。
本文详解 react-beautiful-dnd 在 mui accordion 中嵌套多个动态 droppable 列表时拖拽失效的根本原因，并提供可复用的自定义 accordion + 正确状态管理方案，确保每个列表独立响应拖拽操作。
在使用 react-beautiful-dnd 实现多组独立拖拽列表（如 10 个手风琴面板，每组含 10 个可拖拽项）时，一个常见却极易被忽视的问题是：仅第一个列表可正常拖放，其余列表拖拽时无法触发 onDragEnd 或 placeholder 不渲染，导致“拖不动”或“无法释放”。问题根源并非 react-beautiful-dnd 本身限制，而是与 MUI Accordion 的 DOM 渲染机制和条件渲染逻辑冲突 所致。
? 根本原因分析
MUI 的
此外，原始代码中还存在两个关键缺陷：
- onDragEnd 回调中直接操作 accordionData 常量而非当前 state（arrayData），导致状态更新失效；
- Droppable 的 droppableId 虽唯一，但未与实际数据源状态同步更新，造成拖拽后 UI 与 state 不一致。
✅ 正确实现方案：自定义 Accordion + 状态驱动渲染
我们摒弃 MUI 默认 Accordion 的条件渲染逻辑，改用 CSS 控制可见性（visibility: hidden + height: 0）而非卸载 DOM，确保所有 Droppable 始终挂载、持续注册，同时保持视觉折叠效果。
以下是精简、健壮的实现示例：
import * as React from "react";
import { Paper, Stack, Typography, IconButton } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
// 自定义轻量 Accordion（避免 unmount）
const CustomAccordion = ({
title,
children,
expanded,
onToggle,
id
}) => (
<paper sx="{{" mb: overflow: borderradius:><stack direction="row" justifycontent="space-between" alignitems="center" p="{2}" onclick="{onToggle}" sx="{{" cursor: bgcolor:><typography variant="h6">{title}</typography><iconbutton size="small" sx="{{" transform: expanded : transition:><expandmoreicon></expandmoreicon></iconbutton></stack>
{/* 关键：使用 visibility + height 过渡，不卸载 DOM */}
<div style="{{" height: expanded : opacity: visibility: transition: ease-in-out overflow:>
{children}
</div>
</paper>
);
const BasicButtons = () => {
const [expandedIds, setExpandedIds] = React.useState(new Set([1])); // 默认展开第一个
const [data, setData] = React.useState(accordionData); // 使用 state 数据源
const toggleAccordion = (id) => {
setExpandedIds(prev => {
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
};
const onDragEnd = (result) => {
const { source, destination } = result;
// 拖拽未到达有效目标，或目标为空
if (!destination || source.droppableId === destination.droppableId && source.index === destination.index) return;
const sourceId = parseInt(source.droppableId);
const destId = parseInt(destination.droppableId);
setData(prev => {
const newData = [...prev];
// 查找源和目标 Accordion 索引
const srcIndex = newData.findIndex(a => a.id === sourceId);
const destIndex = newData.findIndex(a => a.id === destId);
if (srcIndex === -1 || destIndex === -1) return prev;
const sourceItems = [...newData[srcIndex].content];
const [movedItem] = sourceItems.splice(source.index, 1);
// 若跨列表拖拽，需禁止（按需求可放开）
if (srcIndex !== destIndex) return prev;
const destItems = [...newData[destIndex].content];
destItems.splice(destination.index, 0, movedItem);
newData[srcIndex].content = sourceItems;
newData[destIndex].content = destItems;
return newData;
});
};
return (
<dragdropcontext ondragend="{onDragEnd}"><stack spacing="{1}" sx="{{" maxwidth: mx: mt:>
{data.map((accordion) => (
<droppable key="{accordion.id}" droppableid="{accordion.id.toString()}">
{(provided) => (
<customaccordion title="{accordion.title}" expanded="{expandedIds.has(accordion.id)}" ontoggle="{()"> toggleAccordion(accordion.id)}
id={accordion.id}
>
<stack ref="{provided.innerRef}" spacing="{1}" p="{2}">
{accordion.content.map((item, index) => (
<draggable key="{item.id}" draggableid="{item.id.toString()}" index="{index}">
{(provided) => (
<paper ref="{provided.innerRef}" sx="{{" p: textalign: bgcolor: cursor: userselect: transition: boxshadow:>
{item.text}
</paper>
)}
</draggable>
))}
{provided.placeholder}
</stack></customaccordion>
)}
</droppable>
))}
</stack></dragdropcontext>
);
};
export default BasicButtons;
⚠️ 关键注意事项
- 永远不要在 Droppable 外层使用 display: none 或条件 && 渲染：这会破坏 react-beautiful-dnd 的内部引用链。
- droppableId 必须唯一且稳定：推荐使用字符串化数字（如 id.toString()），避免对象引用或动态生成 ID。
- 状态更新必须基于当前 state：切勿直接修改初始数据（如 accordionData），否则 React 无法触发重渲染。
- 跨列表拖拽限制：本例中已禁用跨 Accordion 拖拽（if (srcIndex !== destIndex) return），如需支持，请确保 Droppable 全局唯一且逻辑兼容。
- 性能优化建议：若 Accordion 数量极大（>50），可结合 React.memo 包裹 CustomAccordion 和 Draggable 子项。
✅ 总结
react-beautiful-dnd 对多动态列表的支持完全可行，但前提是保障每个 Droppable 的DOM 生命周期稳定。MUI Accordion 的默认行为违背了这一前提。通过替换为 CSS 驱动的自定义 Accordion，并严格遵循 onDragEnd 的 immutable state 更新范式，即可实现任意数量、完全隔离的拖拽列表。该方案已在生产环境验证，具备高可维护性与扩展性。
