推荐使用：React Sortable HOC - 动画化的可排序列表组件

推荐使用：React Sortable HOC - 动画化的可排序列表组件

react-sortable-hocA set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️项目地址:https://gitcode.com/gh_mirrors/re/react-sortable-hoc

尽管React Sortable HOC已经不再积极维护，并计划在未来的React版本中停止工作，但其继任者@dnd-kit值得一试。@dnd-kit提供了一个现代、可扩展的架构，支持复杂场景，并内置了无障碍功能。

然而，如果你仍然对React Sortable HOC有兴趣，那么让我们深入了解它为何能为你带来便捷：

项目简介

React Sortable HOC是一个高阶组件集合，它可以将任何列表转变为动画化、无障碍且触控友好的可排序列表。这个库使用了 Higher Order Components（HOC）的概念，使得它能够无缝地融入你的现有组件体系。

技术剖析

• 高阶组件集成 - 允许你直接在自己的组件上添加排序功能，无需重写代码。
• 丰富的特性 - 包括拖动处理、自动滚动、锁定轴向、事件和更多。
• 流畅的动画 - 为了实现60FPS的梦想而优化。
• 虚拟化库兼容 - 支持诸如react-virtualized、react-tiny-virtual-list等虚拟化库，提高性能。
• 多方向排序 - 水平、垂直或网格布局均可轻松应对。
• 触控支持 - 现代设备的友好接口。
• 无障碍 - 支持通过键盘进行排序。

应用场景

无论你是构建一个任务管理应用，还是设计一个灵活的数据展示界面，React Sortable HOC都能帮助你快速实现列表元素的动态排序。特别是在处理大量数据时，它的虚拟化库兼容性可以提高用户体验，同时避免性能问题。

项目特点

• 简单易用 - 提供基本示例，快速上手。
• 无样式冲突 - 不自带默认样式，方便自定义。
• 移动设备优先 - 预设的触摸支持，让移动设备体验同样出色。
• 锁住轴向 - 可以限制元素仅在一个轴线上移动，提供更好的交互控制。

安装与使用

通过npm安装：

$ npm install react-sortable-hoc --save

然后在你的项目中导入并使用，创建Sortable组件：

import {SortableContainer, SortableElement} from 'react-sortable-hoc';

const SortableItem = SortableElement(({value}) => <li>{value}</li>);
const SortableList = SortableContainer(({items}) => {...});

在你的组件中渲染SortedList，并监听排序结束的回调：

class SortableComponent extends Component {
  ...
  onSortEnd = ({oldIndex, newIndex}) => {/* 更新状态 */}
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

尽管React Sortable HOC已进入维护模式，但其设计理念和强大的功能依然能够满足许多项目的需求。不过，请务必考虑将来的迁移路径，可能会需要转向@dnd-kit，以获得长期的技术支持和更新。

现在，尝试利用React Sortable HOC为你的项目增添互动性和活力吧！

react-sortable-hocA set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️项目地址:https://gitcode.com/gh_mirrors/re/react-sortable-hoc