react dnd如何使用

React DnD 使用指南

React DnD（Drag and Drop）是一个用于在 React 应用中实现拖放功能的库。它基于 HTML5 的拖放 API，提供了更高级的抽象和更好的 React 集成。

安装 React DnD

使用 npm 或 yarn 安装 React DnD 及其依赖：

npm install react-dnd react-dnd-html5-backend

基本使用步骤

1. 设置 DnD 上下文 在应用的顶层组件中，使用 DndProvider 包裹需要拖放功能的区域，并指定后端（如 HTML5 后端）。

   

   import { DndProvider } from 'react-dnd';
   import { HTML5Backend } from 'react-dnd-html5-backend';
   
   function App() {
     return (
       <DndProvider backend={HTML5Backend}>
         {/* 拖放组件 */}
       </DndProvider>
     );
   }

2. 定义可拖拽组件 使用 useDrag Hook 将一个组件标记为可拖拽。

   import { useDrag } from 'react-dnd';
   
   function DraggableItem({ id, name }) {
     const [{ isDragging }, drag] = useDrag(() => ({
       type: 'ITEM',
       item: { id, name },
       collect: (monitor) => ({
         isDragging: !!monitor.isDragging(),
       }),
     }));
   
     return (
       <div
         ref={drag}
         style={{
           opacity: isDragging ? 0.5 : 1,
           cursor: 'move',
         }}
       >
         {name}
       </div>
     );
   }

3. 定义可放置区域 使用 useDrop Hook 将一个组件标记为可放置区域。

   

   import { useDrop } from 'react-dnd';
   
   function DropZone({ onDrop }) {
     const [{ isOver }, drop] = useDrop(() => ({
       accept: 'ITEM',
       drop: (item) => onDrop(item),
       collect: (monitor) => ({
         isOver: !!monitor.isOver(),
       }),
     }));
   
     return (
       <div
         ref={drop}
         style={{
           backgroundColor: isOver ? 'lightgreen' : 'white',
           padding: '20px',
           border: '1px dashed gray',
         }}
       >
         Drop here
       </div>
     );
   }

4. 组合拖拽和放置 将拖拽组件和放置区域组合在一起。

   function DragDropDemo() {
     const [items, setItems] = useState([
       { id: 1, name: 'Item 1' },
       { id: 2, name: 'Item 2' },
     ]);
   
     const handleDrop = (item) => {
       console.log('Dropped:', item);
     };
   
     return (
       <div>
         {items.map((item) => (
           <DraggableItem key={item.id} id={item.id} name={item.name} />
         ))}
         <DropZone onDrop={handleDrop} />
       </div>
     );
   }

自定义拖拽预览

如果需要自定义拖拽时的预览效果，可以使用 DragPreviewImage 或自定义组件。

import { useDrag, DragPreviewImage } from 'react-dnd';

function CustomDragItem({ id, name }) {
  const [{ isDragging }, drag, preview] = useDrag(() => ({
    type: 'ITEM',
    item: { id, name },
  }));

  return (
    <>
      <DragPreviewImage connect={preview} src="/path/to/image.png" />
      <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
        {name}
      </div>
    </>
  );
}

处理拖放逻辑

在放置区域的 drop 回调中，可以处理拖放后的逻辑，如更新状态或调用 API。

const handleDrop = (item) => {
  setItems((prevItems) => prevItems.filter((i) => i.id !== item.id));
};

注意事项

• 后端选择：React DnD 支持多种后端，如 HTML5、Touch 等，根据应用场景选择。
• 性能优化：对于大量拖拽项，使用 useMemo 或 React.memo 优化性能。
• 移动端支持：移动端需要使用 react-dnd-touch-backend 或其他适合的后端。

通过以上步骤，可以快速在 React 应用中实现拖放功能。