# @alexcheuk/react-sortable-hoc 中文文档
规范地址：https://npmcn.com/package/%40alexcheuk/react-sortable-hoc/
版本：1\.11\.1
npm 元数据更新时间：2022-04-04T12:39:34.945Z
中文译文更新时间：2026-11-06T09:42:25.490Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40alexcheuk/react-sortable-hoc
原文对照：https://npmcn.com/package/%40alexcheuk/react-sortable-hoc/?lang=original
项目主页：https://github.com/clauderic/react-sortable-hoc
源码仓库：https://github.com/clauderic/react-sortable-hoc
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：277 kB，16 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：prop-types ^15\.5\.7，react ^0\.14\.0 \|\| ^15\.0\.0 \|\| ^16\.0\.0，react-dom ^0\.14\.0 \|\| ^15\.0\.0 \|\| ^16\.0\.0
- 首次发布：2020-04-29T20:52:33.804Z
- 最新版本发布：2020-04-29T20:59:53.194Z
- 近 30 天下载量：3552（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）
## 中文简介
这是叉子 [https://github.com/clauderic/react-sortable-hoc 互联网档案馆的存檔,存档日期2013-12-02](https://github.com/clauderic/react-sortable-hoc) 带有网格排序修正
## 安装
```sh
npm install @alexcheuk/react-sortable-hoc
```
也可以使用：`pnpm add @alexcheuk/react-sortable-hoc`、`yarn add @alexcheuk/react-sortable-hoc`、`bun add @alexcheuk/react-sortable-hoc`
## README
# 
> 一套更高级的组件,将任何列表变成动画,可访问和易触摸的可排序列表
[](https://www.npmjs.com/package/react-sortable-hoc) [](https://www.npmjs.com/package/react-sortable-hoc) [](https://github.com/clauderic/react-sortable-hoc/blob/master/LICENSE) [](https://gitter.im/clauderic/react-sortable-hoc) 
### 现有实例: [http://clauderic.github.io/ react-sortable-hoc/ (中文(简体) )](https://npmcn.com/package/%40alexcheuk/react-sortable-hoc/#)
## 特征
- **高级顺序组件** - 与您的现有组件结合
- **拖动手柄,自动滚动,锁定轴,事件等等!**
- **Suuper平滑动画** 追寻60FPS的梦想
- **虚拟化图书馆的工作: [反应虚拟化](https://github.com/bvaughn/react-virtualized/), (中文(简体) ), [反应- tiny- 虚拟列表](https://github.com/clauderic/react-tiny-virtual-list), (中文(简体) ), [无限反应](https://github.com/seatgeek/react-infinite)等 (中文(简体) ).**
- **水平列表、 垂直列表或网格** {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢
- **触摸辅助** 👌
- **可访问性:支持键盘排序**
## 安装
使用 [无](https://www.npmjs.com/package/react-sortable-hoc)数字 :
```
$ npm install react-sortable-hoc --save
```
然后,使用支持通用JS或ES2015模块的模块捆绑器,例如 [网络软件包](https://github.com/webpack/webpack)数字 :
```js
// Using an ES6 transpiler like Babel
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
// Not using an ES6 transpiler
var Sortable = require('react-sortable-hoc');
var SortableContainer = Sortable.SortableContainer;
var SortableElement = Sortable.SortableElement;
```
另外,还设有一个UMD大楼:
```html
```
## 使用量
### 基本示例
```js
import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';
const SortableItem = SortableElement(({value}) => {value});
const SortableList = SortableContainer(({items}) => {
return (
{items.map((value, index) => (
))}
);
});
class SortableComponent extends Component {
state = {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
};
onSortEnd = ({oldIndex, newIndex}) => {
this.setState(({items}) => ({
items: arrayMove(items, oldIndex, newIndex),
}));
};
render() {
return ;
}
}
render(, document.getElementById('root'));
```
就这样! React Sortable 默认不会出现任何样式,因为它意在增强您现有的组件.
提供更多代码示例 [这里](https://github.com/clauderic/react-sortable-hoc/blob/master/examples/)。 。 。 .
## 我为什么要用这个?
已经有一些伟大的拖放库(例如, [反应-dnd](https://github.com/gaearon/react-dnd/) 简直太棒了 如果这些图书馆符合你的需要,你肯定应该先尝试一下。 然而,这些库大多依赖于HTML5 Drag & Drop API,它有一些严重的局限性. 例如,如果需要支持触摸设备,如果需要锁定被拖到轴上,或者想要在节点被排序时使它们动起来,那么事情会很快变得棘手. 反应可排序的HOC旨在提供一套简单的更高级的组件来填补这些空白. 如果你在寻找一种死板的,方便移动的方式,将可分类的功能添加到您的列表中,那么你的位置是正确的.
### 道具类型
#### 可排序容器 HOC
| 财产 | 类型 | 默认 | 说明 |
| :-- | :-- | :-- | :-: |
| 轴 | 字符串 | `y` | 物品可以横向,纵向或网格进行排序. 可能的数值 : `x`, (中文(简体) ), `y` 或者说 `xy` |
| 锁定轴 | 字符串 | | 如果您愿意,可以在排序时锁定移动到一轴. HTML5 拖放无法做到这一点 。 可能的数值 : `x` 或者说 `y`。 。 。 . |
| 助手类 | 字符串 | | 您可以在可分类的帮助器中添加一个课,以添加一些样式 |
| 过渡期限 | 数目 | `300` | 要素改变位置时的过渡期。 设定为 `0` 如果您想要禁用过渡 |
| 键盘调试 | 数目 | `transitionDuration` | 键盘排序过程中帮助器被转移时的过渡时间. 设定为 `0` 如果您想要禁用键盘排序辅助器的转换 。 默认为 `transitionDuration` 如果未定义 |
| 密钥编码 | 阵列 | `{`
`lift: [32],`
`drop: [32],`
`cancel: [27],`
`up: [38, 37],`
`down: [40, 39]`
`}` | 包含每个键盘可访问动作的密钥代码阵列的对象. |
| 按下“延迟” | 数目 | `0` | 如果您希望元素仅在被按了一段时间后才能分拣,请改变此属性. 手机的明智默认值是 `200`。无法结合 `distance` 道具 (英语). |
| 压力 | 数目 | `5` | 忽略新闻事件前要容忍的运动像素数量 . |
| 距离 | 数目 | `0` | 如果您想要元素在被拖取出一定的像素后才能排序出. 无法结合 `pressDelay` 道具 (英语). |
| 应取消开始 | 函数 | [函数](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L48) | 此函数在排序开始前被引用,并可用于在排序开始前程序取消排序. 默认情况下, 如果事件目标为 `input`, (中文(简体) ), `textarea`, (中文(简体) ), `select` 或者说 `option`。 。 。 . |
| 启动前更新 | 函数 | | 此函数在排序开始前被引用 。 它可以返回一个承诺,允许您运行一个同步更新(例如: `setState`在排序开始前. `function({node, index, collection, isKeySorting}, event)` |
| 启动时 | 函数 | | 排序开始时引用的回调 . `function({node, index, collection, isKeySorting}, event)` |
| 移动 | 函数 | | 在光标移动时排序时引用的回调 . `function(event)` |
| 关闭 | 函数 | | 在移动某个项目时引用的回调 . `function({index, oldIndex, newIndex, collection, isKeySorting}, e)` |
| 关闭时 | 函数 | | 排序结束时引用的回调 . `function({oldIndex, newIndex, collection, isKeySorting}, e)` |
| 使用 DragHandle 软件 | 布尔 | `false` | 如果你正在使用这个 `SortableHandle` HOC,把这个设定为 `true` |
| 使用 WindowAs 滚动控制器 | 布尔 | `false` | 如果你想,你可以设置 `window` 作为滚动容器 |
| 隐藏稳定鬼 | 布尔 | `true` | 是否自动隐藏鬼元素. 默认情况下,作为方便,Reactable S排序列表会自动隐藏正在排序的元素. 如果您想要应用自己的造型, 请将此设定为虚假 . |
| 锁定到容器边缘 | 布尔 | `false` | 您可以锁定可分类元素的移动到其父 `SortableContainer` |
| 锁定选项 | `OffsetValue`\* \[`OffsetValue`\* \*, `OffsetValue`\* | `"50%"` | 何时`lockToContainerEdges`设置为`true`,这控制了可排序助手与其上/下边缘的相向距离`SortableContainer`。百分比值是相对于正在排序的项目高度。 如果您希望指定锁定时的不同行为 _顶端_ 容器对 _下边_也可以通过`array`(例如:`["0%", "100%"]`) (中文(简体) ). |
| 获取容器 | 函数 | | 可选函数返回可滚动容器元素 。 此属性默认为 `SortableContainer` 元素本身或(如果 `useWindowAsScrollContainer` 窗口。 使用此功能来指定自定义容器对象( 例如, 用于整合某些第三方组件, 如 `FlexTable`) (中文(简体) ). 此函数通过单个参数( 即 `wrappedInstance` React mention),预计它会还原一个 DOM 元素. |
| 获取帮助 | 函数 | [函数](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L74-L77) | 可选 `function({node, index, collection})` 返回可排序帮助的计算尺寸。 见 [默认执行](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/defaultGetHelperDimensions.js) 详情 |
| 助手管理员 | HTML 元素 QQ 函数 | `document.body` | 默认情况下,被克隆的可排序帮助器会被附加在文档正文上. 使用此道具指定一个不同的容器, 用于附加的可分类克隆 。 接受一个 `HTMLElement` 或函数返回 `HTMLElement` 在排序开始前 |
| 禁用自动滚动 | 布尔 | `false` | 拖曳时禁用自动滚动 |
\* 联合国 `OffsetValue` 也可以是有限的 `Number` 或一个 `String` 由数字和一个单位组成(`px` 或者说 `%`) (中文(简体) ). 实例: `10` (这与 `"10px"`, (中文(简体) ), `"50%"`
#### 可分类的元素HOC
| 财产 | 类型 | 默认 | 需要吗? | 说明 |
| :-- | :-- | :-- | :-: | :-- |
| 指数 | 数目 | | ✓ | 这是元素的可分类Index 在它的收藏。 需要这个道具. |
| 收藏 | 数字或字符串 | `0` | | 元素的集合是其中的一部分. 如果您在同一部分内有多个可排序元素组,此选项将有所帮助 `SortableContainer`。 。 。 . [示例](http://clauderic.github.io/react-sortable-hoc/#/basic-configuration/multiple-lists) |
| 已禁用 | 布尔 | `false` | | 元素是否应该排序 |
## 财务问题
### 运行示例
在根文件夹中,运行以下命令以启动 React Story Book :
```
$ npm install
$ npm start
```
### 无障碍
反应排序 HOC 支持键盘排序出框. 为了启动它,确保你 `SortableElement` 或者说 `SortableHandle` 可聚焦。 可以通过设置 `tabIndex={0}` 在您正在加固的组件所制取的最外端 HTML 节点上 `SortableElement` 或者说 `SortableHandle`。 。 。 .
一旦某个项目被聚焦/拖入,按 `SPACE` 捡起来, `ArrowUp` 或者说 `ArrowLeft` 在列表中向后移动一个位置, `ArrowDown` 或者说 `ArrowRight` 在列表中向前移动一个位置, 按 `SPACE` 重新将项目丢入新位置。 按键 `ESC` 在项目被丢弃之前, 将取消排序操作 .
### 网格支持
需要按网格排序吗? 我们掩护你! 刚刚设置 `axis` 向 `xy`. 网格支持目前仅限于一个设置,其中网格中的所有单元格都具有相同的宽度和高度,尽管我们正在努力在不久的将来获得可变宽度支持.
### 项目在排序/ CSS 问题时消失
在排序时, `react-sortable-hoc` 创建您所排序的元素的克隆( 即 _可排序助手_并附在结尾 `` 标签。 原始元素会仍然处于位置,以保持其在 DOM 中的位置,直到拖放结束(带有内置样式使其隐形). 如果 _可排序助手_ 从CSS的角度上被搅乱了,认为也许你选择可拖动项目的人依赖于一个已经不存在的父元素(因为 _可排序助手_ 位于 ``) (中文(简体) ). 这也可以是一个 `z-index` 问题,例如当使用时 `react-sortable-hoc` 在一个靴子模式, 你需要增加 `z-index` 可排序帮助工具的上方显示(参见 [87号](https://github.com/clauderic/react-sortable-hoc/issues/87) 详情请查阅.
### 点击正在吞咽的事件
默认, `react-sortable-hoc` 立即被触发 `mousedown`. 如果你想防止这种行为,有很多策略是随时可用的. 你可以用这个 `distance` 设置一个最小距离( 以像素计) 的道具, 在启用排序前被拖曳 。 你也可以使用这个 `pressDelay` 启用排序前添加延迟的道具 。 或者,您还可以使用 [可排序的手提箱](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableHandle/index.js) 万岁.
### 包装道具没有传递给包裹组件
所有道具都用来 `SortableContainer` 财务报告和审定财务报表 `SortableElement` 以上所列被包装件部分故意消耗,且 **没有** 传给被包裹的部分。 让他们能用另一个名字 传下想要的道具 例如:
```js
const SortableItem = SortableElement(({value, sortIndex}) => (
{value} - #{sortIndex}
));
const SortableList = SortableContainer(({items}) => {
return (
{items.map((value, index) => (
))}
);
});
```
## 依赖关系
反应可排序 HOC 只取决于 [无变化](https://github.com/zertosh/invariant)。它有以下的相对依赖关系: `react`, (中文(简体) ), `react-dom`
## 报告问题
如果相信你发现了问题,请 [报告](https://github.com/clauderic/react-sortable-hoc/issues) 以及任何有关细节以复制。 这样做最容易的方法就是叉开 `react-sortable-hoc` 基本设置沙盒 [代码框](https://codesandbox.io/s/o104x95y86)数字 :
[](https://codesandbox.io/s/react-sortable-hoc-starter-o104x95y86)
## 请求帮助
请不要在个人支持申请中使用问题跟踪器。 相反,使用 [减肥](https://gitter.im/clauderic/react-sortable-hoc) 或叠叠流.
## 捐款
是的,请! 特性请求 / 拉动请求是欢迎的 .
## 常见问题
### @alexcheuk/react-sortable-hoc 是什么？
这是叉子 https://github\.com/clauderic/react-sortable-hoc 互联网档案馆的存檔,存档日期2013-12-02 带有网格排序修正
### 如何安装 @alexcheuk/react-sortable-hoc？
在项目目录运行 npm install @alexcheuk/react-sortable-hoc，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：prop-types（^15\.5\.7）、react（^0\.14\.0 \|\| ^15\.0\.0 \|\| ^16\.0\.0）、react-dom（^0\.14\.0 \|\| ^15\.0\.0 \|\| ^16\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @alexcheuk/react-sortable-hoc 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @alexcheuk/react-sortable-hoc 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @alexcheuk/react-sortable-hoc 可以商用吗？
@alexcheuk/react-sortable-hoc 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @alexcheuk/react-sortable-hoc 的下载量有多少？
根据 npm 官方下载统计，@alexcheuk/react-sortable-hoc 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,552 次，日均约 118 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @alexcheuk/react-sortable-hoc 还在维护吗？
最新版本 1\.11\.1 发布于 2020/04/30（6 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/04/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。