本文首发微信公众号：前端徐徐。

大家好，我是徐徐。今天跟大家分享一个强大的 React 拖拽库：React DnD。

前言

在开发现代 web 应用时，实现复杂的拖拽交互已成为提升用户体验的关键因素。无论是构建类似 Trello 的看板应用，还是需要在应用不同部分之间传输数据的场景，一个灵活且强大的拖拽工具可以大大提高开发效率和用户体验。今天，我们要分享的是 React DnD 这个功能丰富的 React 库，它可以帮助你轻松创建复杂的拖拽界面。

基本信息

• GitHub：https://github.com/react-dnd/react-dnd
• 文档：https://react-dnd.github.io/react-dnd/
• 类别：用户界面工具
• Star：20.9 K

什么是 React DnD？

React DnD 是一套 React 实用工具，旨在帮助开发者构建复杂的拖拽界面，同时保持组件的解耦。它特别适用于像 Trello 和 Storify 这样的应用，在这些应用中，拖拽操作在应用的不同部分之间传输数据，并且组件会根据拖拽事件改变其外观和应用状态。

主要特点

• 与 React 组件无缝集成：通过高阶组件或 hooks 注入拖拽相关的 props。
• 拥抱单向数据流：完全符合 React 的声明式渲染范式，非常适合 Redux 等架构。
• 屏蔽平台差异：处理 HTML5 拖拽 API 的各种陷阱和浏览器不一致性。
• 可扩展和可测试：支持自定义后端，如触摸事件或鼠标事件，以及模拟后端用于测试。

使用场景

• 看板应用：如 Trello 风格的任务管理系统。
• 列表重排序：可拖拽的待办事项列表或优先级排序。
• 组件库：构建可拖拽的 UI 组件，如日历、甘特图等。
• 复杂的数据交互：在应用的不同部分之间通过拖拽传输数据。

快速上手

要在你的项目中使用 React DnD，只需以下简单步骤：

1. 安装 React DnD

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

2. 基本使用示例

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'
export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(
    () => ({
      type: ItemTypes.CARD,
      item: { text },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

3. 设置 DnD 上下文

import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      {/* 你的应用组件 */}
    </DndProvider>
  )
}

结语

React DnD 是一个功能强大且灵活的 React 拖拽库，能够帮助你创建复杂的拖拽交互界面。它提供了底层的原语，让你能够根据具体需求构建自定义的拖拽组件和行为。无论你是需要实现简单的列表重排，还是构建复杂的数据交互界面，React DnD 都能为你提供强大而灵活的解决方案。

希望这篇文章能帮助你了解 React DnD 的特点和用法，并激发你在项目中使用它来提升用户交互体验的灵感。快来尝试一下，相信它会成为你的 React 项目中不可或缺的工具之一！