React DND 是一个用于拖放操作的 React 组件库，提供了丰富的 API 和默认的 HTML5 托放后端实现。但是 HTML5 托放后端仅支持触摸板，对于移动设备无法很好地兼容。此时，我们可以使用 @shashanktiwary/react-dnd-touch-backend 这个 npm 包来实现移动设备的支持。
本文将详细说明如何在 React DND 中使用 @shashanktiwary/react-dnd-touch-backend 包，并提供示例代码和指导意义，供前端开发者参考学习。
安装
首先，我们需要安装 react-dnd 和 react-dnd-touch-backend 这两个 npm 包。
npm install --save react-dnd @shashanktiwary/react-dnd-touch-backend
安装完成后，我们需要在代码中引入这两个包。
import { useDrag, useDrop, DndProvider } from 'react-dnd';
import BackendTouch from '@shashanktiwary/react-dnd-touch-backend';
import HTML5Backend from 'react-dnd-html5-backend';使用
接下来，我们需要将这两个后端都提供给 DndProvider 组件，以便它能够根据设备选取适当的后端。
function MyComponent() {
return (
<DndProvider backend={BackendTouch || HTML5Backend}>
{/* 必须包裹在 DndProvider 中的嵌套组件 */}
</DndProvider>
);
}现在我们已经准备好在组件中使用了，我们新建一个 DragSource 组件和一个 DropTarget 组件，并传入使用 useDrag 和 useDrop hook，然后我们通过 return 返回定义好的组件（可以是任意的 React 组件）。
-- -------------------- ---- -------
-------- -------------- ----- -------- -- -
----- -- ------- -- ----- - ---------
----- - ----- ------- ---- --
-------- ------- -- --
-------- -------------------- - --- - --
---
---
------ -
---- ---------- -------- ------- ---
----------
------
--
-
-------- -------------- -------- -- -
----- -- -------- ------ -- ----- - ---------
------- -------
----- -- -- -- ----- -------------- ---
-------- ------- -- --
------- -----------------
-------- ------------------
---
---
------ -
---- ---------- -------- ---------------- ------ -- ------- -- --------- ---
----------
------
--
-最后，我们在 MyComponent 中使用这两个组件。
-- -------------------- ---- -------
-------- ------------- -
------ -
------------ --------------------- -- --------------
------------- ---------- -----
---- -------- ------ -------- ------- ------- ---------------- ----------- ---- -- ---------------
---------------
--------------
---- -------- ------ -------- ------- ------- ---------------- ------ ---- -- - ---- ------------
---------------
--------------
--
-现在我们已经完成了 React DND 中使用 @shashanktiwary/react-dnd-touch-backend 的基本操作。
指导意义
使用 @shashanktiwary/react-dnd-touch-backend 的好处是，在不改变代码逻辑的前提下，实现了移动设备的支持。这样，我们的应用程序可以在各种设备上良好运行，不会出现兼容性问题。
除此之外，在使用 React DND 开发拖放操作时，需要注意以下几点：
- 必须包裹在 DndProvider 中的嵌套组件。
- DragSource 组件和 DropTarget 组件需要传入 useDrag 和 useDrop hook，然后我们通过 return 返回定义好的组件（可以是任意的 React 组件）。
- 必须指定 accept 属性，用于标识拖放对象的类型。
- 必须通过 collect 属性接收从 monitor 中传递的属性，以便对组件样式进行设置。
示例代码
完整代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- -------- ----------- - ---- ------------
------ ------------ ---- ------------------------------------------
------ ------------ ---- --------------------------
-------- -------------- ----- -------- -- -
----- -- ------- -- ----- - ---------
----- - ----- ------- ---- --
-------- ------- -- --
-------- -------------------- - --- - --
---
---
------ -
---- ---------- -------- ------- ---
----------
------
--
-
-------- -------------- -------- -- -
----- -- -------- ------ -- ----- - ---------
------- -------
----- -- -- -- ----- -------------- ---
-------- ------- -- --
------- -----------------
-------- ------------------
---
---
------ -
---- ---------- -------- ---------------- ------ -- ------- -- --------- ---
----------
------
--
-
-------- ------------- -
------ -
------------ --------------------- -- --------------
------------- ---------- -----
---- -------- ------ -------- ------- ------- ---------------- ----------- ---- -- ---------------
---------------
--------------
---- -------- ------ -------- ------- ------- ---------------- ------ ---- -- - ---- ------------
---------------
--------------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ec081e8991b448dc7e1