本文介绍了React DnD库，它由React和Redux核心作者Dan Abramov创建，用于构建复杂的拖放接口。React DnD专注于拖放功能，不提供现成组件，遵循单向数据流，隐藏底层API问题，支持自定义后端和扩展测试。文中详细讲解了React DnD的基本概念，包括Backend、Item、Type、Monitor、Connector、DragSource、DropTarget以及DragDropContext和DragDropContextProvider。
摘要由CSDN通过智能技术生成
官网文档链接：
https://react-dnd.github.io/react-dnd/docs/overview
React DnD 是什么？
React DnD是React和Redux核心作者 Dan Abramov创造的一组React 高阶组件，可以在保持组件分离的前提下帮助构建复杂的拖放接口。
React DnD 的需求
默认使用 HTML5 拖放API，但支持
不直接操作 DOM
DOM 和拖放的源和目标解耦
融入HTML5拖放中窃取类型匹配和数据传递的想法
React DnD 的特点
专注拖拽，不提供现成组件
React DnD提供了一组强大的原语，但它不包含任何现成组件，而是采用包裹使用者的组件并注入 props 的方式。 它比jQuery UI等更底层，专注于使拖放交互正确，而把视觉方面的效果例如坐标限制交给使用者处理。这其实是一种
关注点分离
的原则，例如React DnD不打算提供可排序组件，但是使用者可以基于它快速开发任何需要的自定义的可排序组件。
单向数据流
类似于 React 一样采取声明式渲染，并且像 redux 一样采用单向数据流架构，实际上内部使用了 Redux
隐藏了平台底层API的问题
HTML5拖放API充满了陷阱和浏览器的不一致。 React DnD为您内部处理它们，因此使用者可以专注于开发应用程序而不是解决浏览器问题。
可扩展可测试
React DnD默认提供了HTML5拖放API封装，但它也允许您提供自定义的“后端(ba
1、项目和类型：这些类型使您可以指定兼容哪些拖动源和放置目标
type: 'box' //自定义（类型非常有用，因为随着应用程序的增长，您可能希望使更多的东西可拖动，但是您并不一定希望所有现有的放置目标突然开始对新项目做出反应。）
2.监控器：监视器使您可以响应于拖放状态更改来更新组件的道具。
对于需要跟踪拖放状态的每个组件，您可以定义一个收集函数，该函数从监视器中检索其相关位
import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { Form, Button, Collapse, Col, Row } from 'antd'
import Header from './Header'
import useList from './useList'
在交互式监视模式下启动测试运行程序。 有关更多信息，请参阅有关的部分。
npm run build
将用于生产的应用程序构建到build文件夹。 它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。
构建被缩小，文件名包括哈希值。 您的应用程序已准备好部署！
有关更多信息，请参阅有关的部分。
npm run eject
注意：这是一种单向操作。 一旦eject ，就回不去了！
如果您对构建工具和配置选择不满意，您可以随时eject 。 此命令将从您的项目中删除单个构建依赖项。
相反，它会将所有配置文件和
无需创建其他包装dom节点-友好的flexbox和焦点管理！
开始吧 :woman::school:
Alex Reardon已创建 :egg: （使用react-beautiful-dnd ）可帮助您尽快开始使用@react-forked/dnd 。
当前支持的功能集 :check_mark_button:
垂直清单 :up-down_arrow:
水平清单 :left-right_arrow:
列表之间的移动（▤ :left-right_arrow: ▤）
虚拟列表支持 :alien_monster: -以60fps的速度解锁10,000个项目
鼠 :mouse_face: ， 键盘 :musical_keyboard: :wheelchair_symbol: 和触摸
官网地址：https://
react-dnd
.github.io/
react-dnd
/docs/
api
/use-
drop
用途：
react-dnd
是一组 React 高阶组件，使用的时候只需要使用对应的
API
将目标组件进行包裹，即可
实现
拖动或接受拖动元素的功能。
yarn add
react-dnd
react-dnd
-html5-backend immuta...
认真的小孩有糖吃:
