返回

React-Sortable-HOC在浏览器端操作列表最全教程

前端

  • 排序列表是一种常见的UI元素，常用于用户自定义排序，或实现类似拖拽功能。
  • React-Sortable-HOC是一个React组件，可以将其他React组件转换为可排序的列表。

使用方法：

  • 安装 React-Sortable-HOC：
npm install --save react-sortable-hoc
  • 在项目中导入：
import SortableContainer from 'react-sortable-hoc';
  • 使用SortableContainer将其他组件转换为可排序的列表：
const SortableList = SortableContainer(MyList);
  • 将SortableList用于组件：
<SortableList items={items} />

效果：

  • 用户可以通过拖拽来调整列表中元素的顺序。
  • 组件会自动更新排序后的列表。

踩坑：

  • 已经排过序的图片无法拖动。
  • 未排序的图片拖动报错。
  • 页面一加载就报错，无法拖动图片。
  • 批量上传图片多次调用接口导致请求canceled。

用到的部分API：

  • SortableContainer：将其他组件转换为可排序的列表。
  • SortableList：可排序的列表组件。
  • items：列表中的元素。
  • onSortEnd：列表排序结束后的回调函数。

SortableContai：

  • 用于将其他组件包装成可排序列表的组件。

排序列表的好处：

  • 允许用户自定义列表的排序。
  • 实现类似拖拽功能，改善用户体验。
  • 易于使用，只需几行代码即可实现。

React-Sortable-HOC的特点：

  • 易于使用，只需几行代码即可实现。
  • 支持多种列表，包括纯文本列表、图片列表、对象列表等。
  • 性能良好，即使列表中包含大量元素，也能保持良好的性能。
  • 高度可定制，可以自定义列表的外观和行为。

相关阅读：

总结

React-Sortable-HOC是一个非常有用的库，它可以帮助您轻松地创建可排序列表。如果您有需要创建可排序列表的需求，那么我强烈推荐您使用React-Sortable-HOC。