本文详解 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: 1, overflow: "hidden", borderRadius: 1 }}>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
p={2}
onClick={onToggle}
sx={{
cursor: "pointer",
bgcolor: "background.paper",
"&:hover": { bgcolor: "action.hover" }
}}
>
<Typography variant="h6">{title}</Typography>
<IconButton size="small" sx={{ transform: expanded ? "rotate(180deg)" : "none", transition: "transform 0.2s" }}>
<ExpandMoreIcon />
</IconButton>
</Stack>
{/* 关键：使用 visibility + height 过渡，不卸载 DOM */}
<div
style={{
height: expanded ? "auto" : 0,
opacity: expanded ? 1 : 0,
visibility: expanded ? "visible" : "hidden",
transition: "all 0.25s ease-in-out",
overflow: "hidden"
}}
>
{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: 600, mx: "auto", mt: 2 }}>
{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}
{...provided.droppableProps}
spacing={1}
p={2}
>
{accordion.content.map((item, index) => (
<Draggable
key={item.id}
draggableId={item.id.toString()}
index={index}
>
{(provided) => (
<Paper
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
sx={{
p: 1.5,
textAlign: "center",
bgcolor: "background.paper",
cursor: "move",
userSelect: "none",
transition: "box-shadow 0.2s",
"&:hover": { boxShadow: 2 }
}}
>
{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 更新范式，即可实现任意数量、完全隔离的拖拽列表。该方案已在生产环境验证，具备高可维护性与扩展性。
