本文介绍一种不依赖 react-beautiful-dnd 等复杂库的轻量级方案，直接基于原生 HTML5 Drag & Drop API 实现 React 列表拖拽排序，规避组件嵌套错误（如 “children is not a function”），并提供可运行示例与关键注意事项。
本文介绍一种不依赖 `react-beautiful-dnd` 等复杂库的轻量级方案，直接基于原生 html5 drag & drop api 实现 react 列表拖拽排序，规避组件嵌套错误（如 “children is not a function”），并提供可运行示例与关键注意事项。
在 React 中实现拖拽功能时，过度依赖高级库（如 react-beautiful-dnd）容易因 API 使用不当引发运行时错误——你遇到的 "children is not a function" 正是典型误用：Droppable 和 Draggable 组件必须严格遵循其 render props 模式，而你在代码中将
为快速落地、降低维护成本并彻底规避此类类型错误，推荐采用原生 HTML5 Drag & Drop API 实现——它零依赖、语义清晰、兼容性良好（支持所有现代浏览器），且完全可控。
以下是一个完整、可直接运行的列表内拖拽重排序示例（非跨容器拖放，聚焦核心逻辑）：
import React, { useState } from 'react';
const initialItems = [
{ id: 1, name: '任务一', description: '待完成的首要事项' },
{ id: 2, name: '任务二', description: '需协作推进的工作' },
{ id: 3, name: '任务三', description: '长期规划中的目标' },
];
export default function TaskList() {
const [items, setItems] = useState(initialItems);
const [draggedItem, setDraggedItem] = useState(null);
const handleDragStart = (e, item) => {
e.dataTransfer.setData('text/plain', JSON.stringify(item));
setDraggedItem(item);
};
const handleDragOver = (e) => {
e.preventDefault(); // 必须调用，否则 onDrop 不会触发
};
const handleDrop = (e, targetIndex) => {
e.preventDefault();
const dragged = JSON.parse(e.dataTransfer.getData('text/plain'));
// 从原位置移除
const filtered = items.filter(item => item.id !== dragged.id);
// 插入到目标索引位置（支持拖到任意位置）
const updated = [
...filtered.slice(0, targetIndex),
dragged,
...filtered.slice(targetIndex)
];
setItems(updated);
};
return (
<div className="task-list" style={{
maxWidth: '600px',
margin: '0 auto',
padding: '20px',
fontFamily: 'system-ui, sans-serif'
}}>
<h2>可拖拽任务列表</h2>
<div
className="drop-zone"
onDragOver={handleDragOver}
style={{
minHeight: '400px',
border: '2px dashed #e0e0e0',
borderRadius: '8px',
padding: '16px',
backgroundColor: '#fafafa'
}}
>
{items.map((item, index) => (
<div
key={item.id}
draggable
onDragStart={(e) => handleDragStart(e, item)}
onDragOver={handleDragOver}
onDrop={(e) => handleDrop(e, index)}
style={{
padding: '12px 16px',
margin: '8px 0',
backgroundColor: '#fff',
border: '1px solid #e0e0e0',
borderRadius: '6px',
cursor: 'move',
boxShadow: draggedItem?.id === item.id ? '0 0 0 2px #2196f3' : 'none',
transition: 'box-shadow 0.2s',
}}
>
<strong>{item.name}</strong>
<p style={{ margin: '4px 0 0 0', fontSize: '0.9em', color: '#666' }}>
{item.description}
</p>
</div>
))}
{items.length === 0 && (
<p style={{ color: '#999', fontStyle: 'italic' }}>暂无任务，拖拽添加</p>
)}
</div>
</div>
);
}✅ 关键要点说明：
- e.preventDefault() 是核心：在 onDragOver 中必须调用，否则浏览器默认阻止 onDrop 触发；
- 索引插入更自然：handleDrop 接收目标 index，实现“拖到某项上方即插入该位置”，符合用户直觉；
- 视觉反馈增强体验：通过 boxShadow 高亮当前被拖拽项，提升交互可感知性；
- 无状态污染：不引入额外 hook 或上下文，逻辑集中、易于测试和复用。
⚠️ 注意事项：
- 原生 Drag & Drop 不支持跨 iframe 或跨窗口拖拽；
- 移动端支持有限（建议搭配 react-dnd-touch-backend 或使用 @dnd-kit/core 等现代替代方案）；
- 若需复杂场景（如多列看板、嵌套列表、动画过渡），再考虑 @dnd-kit/react —— 它比 react-beautiful-dnd 更现代、TypeScript 友好，且 API 更合理。
总之，对于基础列表排序需求，原生方案更轻量、更稳定、更易调试。先跑通逻辑，再按需升级，是构建健壮 React 拖拽功能的务实路径。
