阅读量:8
sortable是一个用于实现拖拽排序的库，而React Hooks是React提供的一种新的特性，用于在函数组件中使用状态和其他React特性。要将sortable与React Hooks配合使用，可以按照以下步骤进行：
- 在React项目中安装sortable库：
npm install react-sortable-hoc - 导入sortable库和必要的React Hooks：
import { SortableContainer, SortableElement } from 'react-sortable-hoc'; import { useState } from 'react'; - 使用useState钩子创建一个状态来存储排序后的数据：
const [items, setItems] = useState([1, 2, 3, 4, 5]); - 创建一个SortableContainer，并在其中映射排序后的数据：
const SortableList = SortableContainer(() => { return ( <ul> {items.map((value, index) => ( <SortableItem key={`item-${value}`} index={index} value={value} /> ))} </ul> ); }); - 创建一个SortableElement组件，用于渲染每个排序项：
const SortableItem = SortableElement(({ value }) => { return <li>{value}</li>; }); - 在SortableList组件中使用onSortEnd回调函数来处理拖拽排序结束后的逻辑：
const onSortEnd = ({ oldIndex, newIndex }) => { setItems(arrayMove(items, oldIndex, newIndex)); }; - 最后，在组件中渲染SortableList组件，并将onSortEnd回调函数传递给它：
return <SortableList items={items} onSortEnd={onSortEnd} />; 通过以上步骤，您可以将sortable与React Hooks配合使用，实现拖拽排序功能并在函数组件中管理状态。
