react dnd如何使用
安装依赖
在项目中安装react-dnd及其HTML5后端依赖。使用npm或yarn执行以下命令：
npm install react-dnd react-dnd-html5-backend
# 或
yarn add react-dnd react-dnd-html5-backend设置DnD上下文
在应用顶层包裹DndProvider并指定后端为HTML5。通常在根组件（如App.js）中配置：
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
function App() {
return (
<DndProvider backend={HTML5Backend}>
{/* 其他组件 */}
</DndProvider>
);
}创建可拖动组件
使用useDrag钩子定义可拖动元素。示例实现一个可拖动的盒子：
import { useDrag } from 'react-dnd';
function DraggableBox() {
const [{ isDragging }, drag] = useDrag(() => ({
type: 'BOX',
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
}));
return (
<div
ref={drag}
style={{
opacity: isDragging ? 0.5 : 1,
cursor: 'move',
}}
>
拖动我
</div>
);
}创建放置目标组件
使用useDrop钩子定义可放置区域。示例实现一个接收BOX类型的区域：
import { useDrop } from 'react-dnd';
function DropZone() {
const [{ canDrop, isOver }, drop] = useDrop(() => ({
accept: 'BOX',
drop: () => ({ name: 'DropZone' }),
collect: (monitor) => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}),
}));
const isActive = canDrop && isOver;
return (
<div
ref={drop}
style={{
backgroundColor: isActive ? 'lightgreen' : 'white',
border: '1px dashed gray',
padding: '20px',
}}
>
{isActive ? '释放放置' : '拖拽到此处'}
</div>
);
}类型定义与交互
通过type字段匹配拖动源和放置目标。accept属性需与useDrag中定义的type一致（如上述的'BOX'）。drop回调函数可返回数据供拖动源使用。
拖拽状态管理
利用collect函数从monitor中获取状态（如isDragging、isOver）。这些状态可用于动态调整样式或交互反馈。
注意事项
- 移动端支持需额外配置触摸后端（如
react-dnd-touch-backend）。 - 复杂场景可结合
useDragLayer自定义拖拽预览。 - 性能优化可通过
arePropsEqual避免不必要的重新渲染。
