@types/react-sortable-hoc 是一个 TypeScript 类型包，提供了一组类型定义，用于支持使用 SortableContainer 和 SortableElement 的 React 组件。本教程将向您介绍如何安装和使用此 npm 包。
安装
npm install @types/react-sortable-hoc
或者
yarn add -D @types/react-sortable-hoc
使用
要使用 @types/react-sortable-hoc 包，您需要先安装 react-sortable-hoc 包，这个包提供了 SortableContainer 和 SortableElement 组件。安装命令如下：
npm install react-sortable-hoc
或者
yarn add react-sortable-hoc
现在，您可以导入 SortableContainer 和 SortableElement 组件并开始使用它们了。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------ --------------- - ---- ---------------------
--------- ------------- -
------ -------
-
----- ------------ - -------------------------------
-- ----- -- -------------- -- -
----------------
-
--
----- ------------ - ------------------
-- ----- -- - ------ -------- -- -- -
------ -
----
------------------ ------ -- -
------------- ----------- ------------- ------------- --
---
-----
--
-
--
----- --- - -- -- -
----- ------- --------- - ------------------------------- --- ----- --- ----- -----
----- --------- - -- --------- -------- -- - --------- ------- --------- ------ -- -- -
---------------- -- ---------------- --------- -----------
--
------ ------------- ------------- --------------------- -------------------- ---
--
------ ------- ----
-------- ---------------- --------- --------- ------- --------- -------- -------- -
----- -------- - -----------
------------------------- -- ------------------------- -------
------ ---------
-在上面的示例中，我们展示了如何使用 SortableContainer 和 SortableElement 来创建一个可拖拽的列表。其中 SortableContainer 是一个高阶组件，它接受 SortableElement 作为其子组件。 SortableList 是一个实际的组件，它接受一个名为 items 的 prop，并渲染渲染列表，其中每个项都是一个 SortableItem 组件。 useDragHandle prop 可控制用户可以拖拽哪个元素，如果设置为 true，则只能通过拖拽句柄来拖拽元素。
onSortEnd 回调函数在排序结束时被调用，并接收一个 oldIndex 和一个 newIndex 参数，用于向数组中插入或移动元素。
总结
在本教程中，我们介绍了如何使用 @types/react-sortable-hoc 包来使用 react-sortable-hoc 组件构建可拖拽的列表。这个 npm 包提供了类型定义，使得在使用 SortableContainer 和 SortableElement 组件时，使用 TypeScript 更加方便和安全。希望这个教程对您有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc194b5cbfe1ea0611e4f