React Sortable HOC 是一个常用的 npm 包，它提供了一种简单的方法来实现拖放排序的功能。在本文中，我们将详细介绍如何使用 React Sortable HOC 和一些示例代码。
安装
要使用 React Sortable HOC，您需要先安装它。可以通过运行以下命令来完成：
--- ------- ------------------
基本用法
React Sortable HOC 提供了一个 SortableContainer 组件和一个 SortableElement 组件来帮助我们实现可排序的列表。我们首先需要导入这两个组件：
------ - ------------------ --------------- - ---- ---------------------
我们可以使用 SortableElement 来创建可排序的列表项：
----- ------------ - ------------------ ----- -- -- - ---------------- ---
在上面的代码中，我们创建了一个名为 SortableItem 的组件，并将其传递给 SortableElement。 SortableItem 组件是一个简单的无状态函数组件，它接收一个值 value 作为参数，并在 <li> 元素中显示该值。
然后，我们可以使用 SortableContainer 来创建包含可排序项的列表：
----- ------------ - -------------------- ----- -- -- -
------ -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
--
---在上面的代码中，我们创建了一个名为 SortableList 的组件，并将其传递给 SortableContainer。SortableList 组件是一个无状态函数组件，它接收一个名为 items 的 prop，这个 items 数组的元素将被渲染为可排序项。
最后，我们可以使用 SortableList 组件并传入一个 items 数组来呈现可排序列表：
----- ----------- - -- -- -
----- ------- --------- - --------------- --- ----- --- ----- -----
----- --------- - -- --------- -------- -- -- -
------------------------- --------- -----------
--
------ ------------- ------------- --------------------- ---
--在上面的代码中，我们创建了一个名为 MyComponent 的组件，并使用 useState hook 来保存一个包含三个元素的数组 items。我们还定义了一个名为 onSortEnd 的回调函数，当用户拖放列表项时会触发它。arrayMove 是一个辅助函数，用于移动数组项以反映列表项的新顺序。
最后，我们将 items 和 onSortEnd 作为 props 传递给 SortableList 组件来呈现列表。现在，我们已经成功创建了一个具有排序功能的列表！
高级用法
除了基本用法，React Sortable HOC 还提供了许多高级用法和配置选项。下面是一些例子：
拖动手柄
您可以使用 SortableHandle 来创建一个拖动手柄，以便用户只能通过手柄来移动列表项。这对于在列表项中包含复杂的交互元素时非常有用。
----- ---------- - ----------------- -- -----------------
----- ------------ - ------------------ ----- -- -- -
----
----------- --
-------
-----
---在上面的代码中，我们创建了一个名为 DragHandle 的组件，并将其传递给 SortableHandle。然后，在 SortableItem 组件内部，我们将 DragHandle 组件插入到列表项的开头。现在，用户只能通过拖动 :: 元素来移动该项。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/33022