介绍
snphq-react-sortable-hoc 是一个基于React的 npm包，它提供了一套可拖拽排序、排序动效以及可调用的React高阶组件（HOC）来实现这些功能。
snphq-react-sortable-hoc 具有很高的灵活性和可定制性，使其成为一个非常有用的 npm包，适用于在React应用程序中实现可拖拽排序。它比其他路线更直接和简单。 如果你正在寻找一种灵活的方式来实现可拖动的排序支持，则 snphq-react-sortable-hoc 是一个很好的选择。
在本文中，我将带领大家了解 snphq-react-sortable-hoc 的基本使用以及如何使用它来实现可拖拽的排序。我们将使用具有实际用途的示例作为主要的学习工具，以帮助你更好地理解 snphq-react-sortable-hoc 的使用方法。
安装
你可以通过npm在你的React项目中安装 snphq-react-sortable-hoc：
npm install snphq-react-sortable-hoc --save
实现
现在，我们将使用一个基本的示例来演示如何使用 snphq-react-sortable-hoc npm包。我们的示例是一个模拟日程管理的列表，允许你在列表中添加和删除事件，并通过拖动和重新排序以及删除事件。
我们将从一个简单的 React 组件开始。 在这个组件中，我们为每个日程项目创建一个排名对象，然后按照排序顺序进行排序。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------ --------------- - ---- ---------------------------
----- ------------ - ------------------ ----- -- -- -
----------------
---
----- ------------ - -------------------- ----- -- -- -
------ -
----
------------------ ------ -- -
------------- ----------- ------------- ------------- --
---
-----
--
---
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - -
------ ------------- -------- ----------
--
-
--------- - -- --------- -------- -- -- -
------------------------ --------- ------------ ---------
--- ----------- - ------------------------
---------------------------- -- ---------------------------- ------
---------------
------ ------------
---
-
-------- -
------ ------------- ------------------------ -------------------------- ---
-
-
------ ------- ------------
我们首先在组件中导入 SortableContainer 和 SortableElement 函数，然后基于这两个函数创建了我们的 SortableList 和 SortableItem 组件。 SortableList 组件管理着我们的日程项列表，并通过 SortableItem 呈现每个项。
在我们的 ScheduleList 组件中，我们为每个渲染的日程项（SortableItem）定义了一个 key 属性和一个 index 属性。 key 属性使 React 能够正确地跟踪每个项，以确保它们在提示时不会被混叠。 index 属性是 Snphq-React-Sortable-Hoc 包用于重排元素的必需属性。
我们还创建了一个 onSortEnd 函数来捕获拖拽和排序时的当前顺序和新顺序，以便我们更新列表顺序。我们简单地将新顺序的项分割到我们的 items 数组中，并使用 setState 更新整个列表。
现在所有的代码都准备好了，请查看你的 React 应用程序，并确保你可以正确地渲染列表和进行拖动排序。
结论
在本文中，我们学习了如何使用 snphq-react-sortable-hoc npm包来实现一个简单的可拖拽排序的列表。 我们探讨了一些 snphq-react-sortable-hoc 包的基本功能以及如何使用它们，并提供了一个实际示例工具来帮助你更好地理解如何使用 snphq-react-sortable-hoc npm包。
我们希望，这个教程能够帮助您更好地了解如何利用这个强大的npm包来实现您的React应用程序中的拖拽排序功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ef81e8991b448e0a79