react-dnd的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了react-dnd的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

介绍：

React DnD（Drag and Drop）是一个用于实现拖放功能的 React 拓展库。它提供了一组用于构建可拖动和可放置组件的高阶组件和钩子函数。文章来源地址https://www.toymoban.com/news/detail-645880.html

使用：

安装 react-dnd 和 react-dnd-html5-backend：

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

创建一个拖放容器组件和一个可拖动的组件。
拖放容器组件（DragDropContainer）负责管理拖放行为，并提供拖放上下文给可拖动组件。

// jxs文件

import { DragDropContextProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

function App() {
  return (
    <DragDropContextProvider backend={HTML5Backend}>
      <div className="App">
        {/* 可拖动组件 */}
        <DraggableComponent />
      </div>
    </DragDropContextProvider>
  );
}

可拖动组件（DraggableComponent）定义了可拖动的元素。

// jsx

import { useDrag } from 'react-dnd';

function DraggableComponent() {
  const [{ isDragging }, drag] = useDrag({
    item: { type: 'box' }, // 指定拖动项的类型
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  return (
    <div
      ref={drag} // 将 ref 绑定到可拖动元素上
      style={{ opacity: isDragging ? 0.5 : 1 }} // 根据拖动状态改变样式
    >
      Drag me!
    </div>
  );
}

创建一个可放置的组件。
可放置组件（DroppableComponent）定义了可放置元素，它可以接受被拖动元素。

// jsx

import { useDrop } from 'react-dnd';

function DroppableComponent() {
  const [{ isOver }, drop] = useDrop({
    accept: 'box', // 指定接受的拖动项类型
    drop: () => console.log('Dropped!'), // 拖动项被放置时的回调函数
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  return (
    <div ref={drop} style={{ backgroundColor: isOver ? 'yellow' : 'white' }}>
      Drop here!
    </div>
  );
}

渲染拖放组件。
将拖放容器组件和可放置组件放在需要拖放功能的组件中。
通过以上步骤，你就可以在 React 应用中使用 react-dnd 实现拖放功能。注意，上述代码只是简单的示例，实际使用时可能需要根据具体需求进行更复杂的配置和操作。
```
// jsx

function App() {
  return (
    <DragDropContextProvider backend={HTML5Backend}>
      <div className="App">
        <DraggableComponent />
        <DroppableComponent />
      </div>
    </DragDropContextProvider>
  );
}
```
通过以上步骤，你就可以在 React 应用中使用 react-dnd 实现拖放功能。注意，上述代码只是简单的示例，实际使用时可能需要根据具体需求进行更复杂的配置和操作。