React-Nestable 使用教程

React-Nestable 使用教程

react-nestable Drag & drop hierarchical list made as a react component 项目地址: https://gitcode.com/gh_mirrors/re/react-nestable

1. 项目介绍

React-Nestable 是一个基于 React 的拖放 hierarchical list 组件。它可以用来创建可折叠的层级列表，支持拖放排序，允许用户通过拖动操作来重新排序列表项，并且可以嵌套子列表。

2. 项目快速启动

首先，确保你已经安装了 Node.js 和 npm。然后按照以下步骤启动项目：

# 克隆项目到本地
git clone https://github.com/primetwig/react-nestable.git

# 进入项目目录
cd react-nestable

# 安装项目依赖
npm install

# 启动开发服务器
npm start

启动成功后，你可以在浏览器中访问 http://localhost:3000 来查看组件示例。

下面是一个简单的使用 React-Nestable 组件的示例代码：

import React from 'react';
import Nestable from 'react-nestable';

const items = [
  { id: 0, text: 'Andy' },
  {
    id: 1, text: 'Harry',
    children: [
      { id: 2, text: 'David' }
    ]
  },
  { id: 3, text: 'Lisa' }
];

const renderItem = ({ item }) => item.text;

const Example = () => (
  <Nestable
    items={items}
    renderItem={renderItem}
  />
);

export default Example;

确保将 Nestable 组件的样式引入到你的项目中：

import 'react-nestable/dist/styles/index.css';

3. 应用案例和最佳实践

在创建层级列表时，以下是一些最佳实践：

• 确保每个列表项有一个唯一的 id 属性，以便于区分元素。
• 使用 renderItem 函数来自定义每个列表项的渲染方式。
• 如果需要，可以通过 onChange 回调来监听列表项的变化。
• 使用 onDragStart 和 onDragEnd 回调来处理拖动事件的开始和结束。

4. 典型生态项目

React-Nestable 可以与其他 React 生态系统中的库一起使用，例如：

• 使用 Redux 来管理列表状态。
• 与 React Router 一起使用，为不同层级的列表项创建不同的路由。
• 结合 Ant Design 或其他 UI 库来美化组件界面。

以上就是 React-Nestable 的使用教程。如果你在实践过程中遇到任何问题，或者有新的功能需求，欢迎提出 issue 或创建 PR 来共同改进这个项目。

react-nestable Drag & drop hierarchical list made as a react component 项目地址: https://gitcode.com/gh_mirrors/re/react-nestable