React-reorder-list 是一个帮助前端开发者实现可排序列表的 npm 包，提供了丰富的配置选项和灵活的 API，可以轻松创建各种类型的可排序列表，并与 React 应用无缝集成。在本篇教程中，我们将为大家介绍 react-reorder-list 的基本使用方法及一些高级用法。
为什么需要 react-reorder-list
可排序列表是现代 Web 应用中非常常见的一种 UI 设计，通过拖拽和放置实现列表项的位置变换可以大大增强用户交互性。然而，要实现一个可排序列表并不容易，需要处理大量的顺序、事件和状态管理。这时候，我们就需要借助一些强大的工具来简化这项工作。React-reorder-list 正是为此而生，它提供了以下几个优点：
- 方便易用：只需传入列表数组和回调函数即可完成基础列表组件的构建。
- 可定制性强：提供多个配置选项，让我们可以按需设置样式、排列方向等。
- API 灵活：提供了各种用于查询、修改、删除列表项的方法，并支持自定义拖拽行为。
- 维护更新：持续更新，且有活跃的社区支持，可以为你的项目提供便利和后盾。
如何使用 react-reorder-list
本节将从最基础的使用开始讲起，通过完成一个简单的可排序列表组件来介绍 react-reorder-list 的相关 API 和配置选项。
安装
首先，需要在项目中安装 react-reorder-list：
npm install --save react-reorder-list
引入
安装完成后，在需要使用 react-reorder-list 的组件中引入：
import React, { useState } from 'react';
import { ReorderList } from 'react-reorder-list';使用
接下来，我们将构建一个简单的列表组件，实现对一组文本的排序。代码如下：
-- -------------------- ---- -------
----- ----- - --------- --------- --------- -------- ----------
------ ------- -------- -------------- -
----- ------ -------- - ----------------
----- --------- - ------------ --------- -- -
----- ------- - -----------------
----- --------- - -------------------------- ---
------------------------ -- ---------
-----------------
--
------ -
------------
------------
---------------------
------------- -- -----
---------------- -- ------------------
--
--
-首先，我们定义了一个常量 items，代表着现有的一组文本元素。组件初始化时，我们将 items 传递给 useState，返回一个变量 list 和更新它的方法 setList。这样，我们就可以通过改变 list 数组来动态更新界面。
接着，定义了一个函数 onReorder，用于处理拖拽排序之后的逻辑。该函数接收 startIndex 和 endIndex 两个参数，代表着被拖拽元素在原始列表中的索引和目标位置的索引。我们通过 Array.splice() 方法将被拖拽元素从原位置删除并插入到目标位置，最后再将更新后的 newList 传递给 setList 方法。
最后，我们将 ReorderList 组件进行了简单的配置。其中 items 参数传递了初始化时的文本数组，onReorder 参数传递我们自定义的回调函数 onReorder，itemKey 参数则传递了一个提取 item 唯一标识符的函数，renderItem 参数则传递了一个自定义渲染列表项的函数。
这样就完成了一个简单的可排序列表组件。我们可以在浏览器中预览其效果：
高级用法
除了上述基础用法外，react-reorder-list 还提供了许多高级用法来应对复杂的场景需求。我们这里只介绍其中一部分，更多详细的用法可以参考官方文档。
自定义拖拽行为
react-reorder-list 提供了onDragEnd 和 onDragUpdate 两个生命周期函数，让我们可以自定义拖拽行为。在 onDragEnd 中，我们可以判断用户拖拽行为是否符合预期，并进行回调函数的触发。在 onDragUpdate 中，我们可以保存当前的拖拽状态并处理一些额外事务，比如拖拽边界限制。
-- -------------------- ---- ------- ----- ------------ - -- -------------- --------- ------------- ---------- -- -- - -- -- --------- -- ----- --------- - -- ------- ---- -- -- - -- -- --------- -- ------------ ------------- --------------------- --------------------------- -
额外的排序功能
除了基础的拖放排序外，react-reorder-list 还提供了一些额外的排序功能以更好地定制列表项的内容和表现形式：autoScroll 自动滚动、scrollSpeed 滚动速度、outerElement 外部容器、placeholderClassName 占位符样式、dragStartThreshold 拖动阈值等等。
<ReorderList
items={items}
autoScroll={true}
scrollSpeed={10}
outerElement="#container"
placeholderClassName="placeholder"
dragStartThreshold={10}
>结语
在本文中，我们学习了如何使用 react-reorder-list 创建可排序列表组件，并了解了一些高级用法和相关配置选项。希望这篇文章能够帮助你在开发 Web 应用时更加便利地应用 react-reorder-list。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3781e8991b448daf88