React-Anything-Sortable 是一个用于构建好看而且可排序的列表的 React 组件。这个组件酷，因为你可以用它来构建任何类型的列表，不管它是什么类型的元素。本篇文章将会介绍如何安装和使用 React-Anything-Sortable。
安装
你可以使用 npm 或者 yarn 安装 React-Anything-Sortable。执行下面的命令即可安装：
npm install react-anything-sortable
或
yarn add react-anything-sortable
使用
- 导入 ReactAnythingSortable 组件：
import ReactAnythingSortable from 'react-anything-sortable';
- 初始化你的列表数据：
const data = [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'orange' },
{ id: 4, name: 'pear' },
];- 创建一个 handleSort 函数来更新列表的顺序：
handleSort = (newOrder) => {
const newData = [...data];
newOrder.forEach((index, newPosition) => {
newData[index].order = newPosition + 1;
});
setData(newData);
};- 渲染你的组件：
<ReactAnythingSortable
items={data}
sortCallback={handleSort}
renderItem={(item) => <div key={item.id}>{item.name}</div>}
/>参数
ReactAnythingSortable 组件有三个必须的参数：
- items: Array<Object> - 列表的数据
- sortCallback: Function - 点击排序按钮时触发的回调函数
- renderItem: Function - 用来渲染列表项的函数
除此之外，还有一些可选的属性可以设置：
- containment: String or Element - 约束列表的范围
- direction: String - 排序的方向，可以是 "horizontal" 或者 "vertical"
- className: String - 组件的类名
示例代码
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------------- ---- --------------------------
----- --- - -- -- -
----- ------ -------- - ----------
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- ------ --
---
----- ---------- - ---------- -- -
----- ------- - ----------
------------------------ ------------ -- -
-------------------- - ----------- - --
---
-----------------
--
------ -
----------------------
------------
-------------------------
------------------ -- ---- --------------------------------
------------------------
----------------------
----------------
--
--
--
------ ------- ----总结
React-Anything-Sortable 可以让你更加简单高效地构建任何类型的列表，并且你不用担心排序问题。本篇文章提供了一个详细的教程和示例代码，希望能够帮助到你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/205147