【亲测免费】 React-Sortablejs 技术文档

React-Sortablejs 是一个用于集成 SortableJS 的 React 组件库，它使您能够在 React 应用程序中轻松实现拖放排序功能。以下是对该库的详细概述，包含安装指南、使用说明、API 介绍以及示例。

安装指南

要将 React-Sortablejs 集成到您的项目中，首先需要安装必要的依赖：

npm install --save react-sortablejs sortablejs
npm install --save-dev @types/sortablejs

# 若使用 Yarn，则执行：
yarn add react-sortablejs sortablejs
yarn add -D @types/sortablejs

请注意，sortablejs 和 @types/sortablejs 作为同级依赖管理，特别是在需要类型定义时。

项目使用说明

基础使用

React-Sortablejs 允许您通过简单的组件包裹来实现列表的排序。

函数式组件示例

import React, { FC, useState } from "react";
import { ReactSortable } from "react-sortablejs";

interface ItemType {
  id: number;
  name: string;
}

export const BasicFunction: FC = () => {
  const [state, setState] = useState<ItemType[]>([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
  ]);

  return (
    <ReactSortable list={state} setList={setState}>
      {state.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </ReactSortable>
  );
};

类组件示例

如果您偏好类组件，也可以这样使用：

import React, { Component } from "react";
import { ReactSortable } from "react-sortablejs";

interface BasicClassProps {}
interface BasicClassState {
  list: { id: string; name: string }[];
}

export class BasicClass extends Component<BasicClassProps, BasicClassState> {
  state = {
    list: [{ id: "1", name: "shrek" }],
  };

  render() {
    return (
      <ReactSortable list={this.state.list} setList={this.setState.bind(this)}>
        {this.state.list.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </ReactSortable>
    );
  }
}

插件使用

SortableJS 提供了如 MultiDrag 和 Swap 等插件，可在 React-Sortablejs 中启用它们：

import React from "react";
import { ReactSortable, Sortable, MultiDrag, Swap } from "react-sortablejs";

Sortable.mount(new MultiDrag(), new Swap());

const PluginApp = () => {
  // 使用插件特性，例如 multiDrag 或 swap
};

Sortable API

React-Sortablejs 直接支持 SortableJS 的大部分选项，可通过属性形式应用：

const AppWithOptions = () => {
  const [state, setState] = useState(...);
  
  return (
    <ReactSortable
      group="myGroup"
      animation={150}
      delay={100}
    >
      {/* 清单 */}
    </ReactSortable>
  );
};

React-Specific API

• list: 接收状态数组，映射为列表项。
• setList: 更新列表的状态，类似于 useState 的更新函数。
• tag: 默认为 div，可以设置为任何 HTML 标签或通过 forwardRef 创建的自定义组件。

注意事项

• 不要使用索引作为列表项的 key，以避免排序后的问题。应使用唯一标识符（如 id）。
• 当涉及到嵌套排序时，可能会遇到更新状态的挑战，尽量避免同一层次间移动元素导致的双状态更新。

通过遵循这些指导原则，您可以有效地在您的 React 项目中集成并利用 React-Sortablejs 来创建交互式的拖放排序列表。