本文详解 react-beautiful-dnd 在 mui accordion 中嵌套多个动态 droppable 列表时拖拽失效的根本原因，并提供可复用的自定义 accordion 实现方案，确保每个列表独立响应拖拽、状态更新准确无误。
本文详解 react-beautiful-dnd 在 mui accordion 中嵌套多个动态 droppable 列表时拖拽失效的根本原因，并提供可复用的自定义 accordion 实现方案，确保每个列表独立响应拖拽、状态更新准确无误。
在使用 react-beautiful-dnd 构建多组独立可拖拽列表（如 10 个手风琴面板，每面板内含 10 个可排序项）时，一个常见却极易被忽视的问题是：仅首个列表支持正常拖放，其余列表拖拽时无法接收放置（drop）。该问题并非源于 onDragEnd 逻辑错误，而根植于 MUI Accordion 的渲染机制与 react-beautiful-dnd 的 DOM 生命周期冲突。
? 问题本质：MUI Accordion 的条件渲染破坏了 Droppable 的稳定性
MUI 的
- 持续监听拖拽进入/离开事件；
- 正确计算占位符（placeholder）位置；
- 维持 droppableId 的唯一性与生命周期一致性。
一旦 Droppable 因 Accordion 折叠而被销毁，其内部状态丢失，onDragEnd 中读取的 result.destination 将为 null（即无法 drop），导致“拖不动”假象——这正是原代码中 if (!result.destination) return; 总是提前退出的原因。
✅ 正确解法：用受控状态 + CSS 可见性替代 DOM 卸载
我们需替换 MUI Accordion 为轻量级、不卸载子组件的自定义实现，仅通过 visibility: hidden 或 height: 0 + overflow: hidden 控制视觉展开/收起，确保 Droppable 始终挂载。
以下是关键改造步骤与完整可运行代码：
1. 自定义 Accordion 组件（保持 Droppable 持久化）
import * as React from 'react';
import { Paper, Stack, Typography, IconButton } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
interface CustomAccordionProps {
title: string;
expanded: boolean;
onToggle: () => void;
children: React.ReactNode;
}
const CustomAccordion = ({
title,
expanded,
onToggle,
children
}: CustomAccordionProps) => {
return (
<Paper sx={{ mb: 2, overflow: 'hidden', borderRadius: 2 }}>
{/* Header — 始终存在 */}
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
p={2}
sx={{
bgcolor: 'grey.50',
cursor: 'pointer',
'&:hover': { bgcolor: 'grey.100' }
}}
onClick={onToggle}
>
<Typography variant="subtitle1" fontWeight="medium">
{title}
</Typography>
<IconButton size="small" sx={{ transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}>
<ExpandMoreIcon />
</IconButton>
</Stack>
{/* Content — 用 visibility + height 过渡，不卸载 DOM */}
<Stack
component="div"
sx={{
height: expanded ? 'auto' : 0,
visibility: expanded ? 'visible' : 'hidden',
overflow: 'hidden',
transition: 'all 0.3s ease-in-out'
}}
>
{children}
</Stack>
</Paper>
);
};
export default CustomAccordion;2. 主组件重构：使用受控展开状态 + 修复 onDragEnd
import * as React from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
import { Paper, Stack, Typography } from '@mui/material';
import CustomAccordion from './CustomAccordion'; // 引入上一步组件
// ...（保持 accordionData 不变）
const BasicButtons = () => {
const [arrayData, setArrayData] = React.useState(accordionData);
const [expandedIds, setExpandedIds] = React.useState<Set<number>>(new Set([1])); // 默认展开第一个
const toggleAccordion = (id: number) => {
setExpandedIds(prev => {
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
};
const onDragEnd = (result: DropResult) => {
const { source, destination } = result;
// ✅ 关键：destination 为 null 表示未 drop 到有效区域（如拖出容器），直接返回
if (!destination) return;
// 源和目标在同一列表内（本需求要求）→ 仅允许 intra-list 拖拽
if (source.droppableId !== destination.droppableId) return;
const accordionId = parseInt(source.droppableId, 10);
const sourceIndex = source.index;
const destIndex = destination.index;
setArrayData(prev =>
prev.map(accordion => {
if (accordion.id !== accordionId) return accordion;
const newContent = Array.from(accordion.content);
const [movedItem] = newContent.splice(
sourceIndex > destIndex ? sourceIndex + 1 : sourceIndex,
1
);
// 插入时需校正索引（因已删除一项）
const insertIndex = destIndex > sourceIndex ? destIndex - 1 : destIndex;
newContent.splice(insertIndex, 0, movedItem);
return { ...accordion, content: newContent };
})
);
};
return (
<DragDropContext onDragEnd={onDragEnd}>
<Stack spacing={2} sx={{ maxWidth: 600, mx: 'auto', px: 2 }}>
{arrayData.map((data) => (
<Droppable key={data.id} droppableId={data.id.toString()}>
{(provided) => (
<CustomAccordion
title={data.title}
expanded={expandedIds.has(data.id)}
onToggle={() => toggleAccordion(data.id)}
>
{/* ✅ Droppable 内容始终挂载，ref 和 props 稳定 */}
<Stack
ref={provided.innerRef}
{...provided.droppableProps}
spacing={1}
p={2}
>
{data.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: 2,
bgcolor: 'background.paper',
border: '1px solid',
borderColor: 'divider',
cursor: 'grab',
'&:active': { cursor: 'grabbing' }
}}
>
<Typography>{item.text}</Typography>
</Paper>
)}
</Draggable>
))}
{provided.placeholder}
</Stack>
</CustomAccordion>
)}
</Droppable>
))}
</Stack>
</DragDropContext>
);
};
export default BasicButtons;⚠️ 注意事项与最佳实践
- 禁止跨列表拖拽？ 本例通过 if (source.droppableId !== destination.droppableId) return 显式禁用，符合业务需求；若需支持跨列表，请确保 droppableId 全局唯一且 onDragEnd 正确处理源/目标列表索引。
- 性能优化：10×10 列表规模较小，无需虚拟滚动；但若单列表项超 50+，建议结合 react-window 或 FixedSizeList 包裹 Droppable 内容。
- 无障碍支持：自定义 Accordion 需手动添加 aria-expanded、aria-controls 等属性，MUI 版本已内置，迁移时请补全。
- 样式过渡：height: auto 无法直接 CSS 过渡，故采用 visibility + max-height 替代方案更稳妥（示例中简化为 height: auto / 0，生产环境推荐 max-height: 500px / 0 + overflow: hidden）。
✅ 总结
react-beautiful-dnd 的多列表拖拽失效，90% 源于外部 UI 库（如 MUI Accordion、Tabs）的条件渲染导致 Droppable 卸载。根本解法不是重写 onDragEnd，而是保证每个 Droppable 的 DOM 节点持久存在。通过轻量自定义 Accordion 替代方案，既规避了框架限制，又完全保留了 dnd 的声明式体验。此模式同样适用于 Tabs、Drawer、Modal 等任何可能卸载子树的容器组件。
