本文介绍如何使用 HTML5 原生 Drag & Drop API 在 React 中实现轻量、可靠且无依赖的列表项拖放功能，规避 react-beautiful-dnd 等库因结构误用导致的 “children is not a function” 错误。
本文介绍如何使用 html5 原生 drag & drop api 在 react 中实现轻量、可靠且无依赖的列表项拖放功能，规避 `react-beautiful-dnd` 等库因结构误用导致的 “children is not a function” 错误。
在 React 中实现拖放功能时，初学者常因误用高级库（如 react-beautiful-dnd）的渲染函数模式而触发 TypeError: children is not a function —— 根本原因在于将 Droppable 或 Draggable 的 children 渲染器（必须是函数）错误地当作普通 JSX 元素嵌套，或混淆了 Droppable/Draggable 的层级职责（例如在 Droppable 内直接写 Draggable 而未通过 provided 函数透传 props）。
与其调试复杂库的约定式 API，不如优先采用原生 HTML5 Drag & Drop：零依赖、语义清晰、兼容性好（现代浏览器全覆盖），且完全可控。下面是一个生产就绪的最小可行示例：
✅ 正确实现：纯原生拖放（推荐入门方案）
import React, { useState } from 'react';
const initialItems = [
{ id: 1, name: '任务 A', description: '完成首页设计稿' },
{ id: 2, name: '任务 B', description: '对接后端接口' },
{ id: 3, name: '任务 C', description: '编写单元测试' },
];
export default function TaskBoard() {
const [items, setItems] = useState(initialItems);
const handleDragStart = (e, item) => {
e.dataTransfer.setData('application/json', JSON.stringify(item));
// 可选：设置拖拽反馈样式（如半透明效果）
e.target.style.opacity = '0.4';
};
const handleDragEnd = (e) => {
e.target.style.opacity = '1';
};
const handleDragOver = (e) => {
e.preventDefault(); // 必须阻止默认行为，否则 onDrop 不会触发
};
const handleDrop = (e) => {
e.preventDefault();
try {
const droppedItem = JSON.parse(e.dataTransfer.getData('application/json'));
// 防止重复添加（按 id 去重）
if (!items.some(i => i.id === droppedItem.id)) {
setItems(prev => [...prev, droppedItem]);
}
} catch (err) {
console.warn('无效的拖拽数据:', err);
}
};
return (
<div classname="task-board">
<h2>待办看板</h2>
<div classname="drop-zone" ondragover="{handleDragOver}" ondrop="{handleDrop}">
<p>? 将下方任务拖入此区域重新排序或归档</p>
{items.length === 0 ? (
<p classname="empty-tip">暂无任务，试试拖一个进来？</p>
) : (
<ul classname="task-list">
{items.map((item) => (
<li key="{item.id}" classname="task-item" draggable ondragstart="{(e)"> handleDragStart(e, item)}
onDragEnd={handleDragEnd}
>
<strong>{item.name}</strong>
<small>{item.description}</small>
</li>
))}
</ul>
)}
</div>
</div>
);
}
? 对应 CSS（增强体验）
.task-board {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.drop-zone {
min-height: 200px;
border: 2px dashed #4a90e2;
border-radius: 8px;
padding: 24px;
background-color: #f8fbff;
text-align: center;
transition: background-color 0.2s;
}
.drop-zone.drag-over {
background-color: #e6f2ff;
}
.task-list {
list-style: none;
padding: 0;
margin-top: 16px;
}
.task-item {
background: white;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 12px 16px;
margin: 8px 0;
cursor: move;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
transition: all 0.15s ease;
}
.task-item:hover {
background-color: #f9f9f9;
}
.task-item:active {
opacity: 0.7;
}
.task-item strong {
display: block;
margin-bottom: 4px;
color: #333;
}
.task-item small {
display: block;
font-size: 0.85em;
color: #666;
}
.empty-tip {
color: #999;
font-style: italic;
}
⚠️ 关键注意事项
- e.preventDefault() 是核心：在 onDragOver 和 onDrop 中必须调用，否则浏览器会执行默认跳转或下载行为，导致 onDrop 失效。
- 数据类型建议用 application/json：比 text/plain 更安全，避免特殊字符解析失败；同时需配合 JSON.parse/JSON.stringify。
- 防重复与异常兜底：onDrop 中应校验数据有效性，并处理重复 ID 场景（如本例中 !items.some(...)）。
- 视觉反馈提升体验：通过 onDragStart/onDragEnd 动态修改 opacity 或添加 drag-over class，让用户明确感知拖放状态。
- 移动端限制：HTML5 原生拖放不支持 iOS Safari 和部分安卓浏览器。如需全平台支持，请后续引入 react-dnd（基于 HTML5 + Touch Polyfill）或 @dnd-kit/core（现代化、触摸友好）。
✅ 总结
对于简单列表拖放场景，原生 API 是最轻量、最易调试的选择。它绕开了 react-beautiful-dnd 等库对组件树结构的强约束（如 Droppable → Draggable 必须严格嵌套、children 必须为函数等），也避免了因 props 透传遗漏（如忘记展开 provided.draggableProps）导致的运行时错误。掌握这一基础方案，不仅能快速交付 MVP，也为后续升级到专业库打下坚实理解基础。
