React Complex Tree

一个无偏见的、可访问的树形组件，支持多选和拖放功能

查看官方文档以了解更多示例和更全面的文档。许多常见问题或疑问都在FAQ页面中得到了解答。

更新日志可在https://rct.lukasbach.com/docs/changelog查看。从v1.x迁移到v2.x时，请查看v2发布说明。

赞助商

react-complex-tree的开发得到了社区的支持。特别感谢：

了解如何支持react-complex-tree的开发。

安装

要开始使用React Complex Tree，请通过以下命令将其作为依赖项安装到您的项目中：

npm install react-complex-tree
yarn add react-complex-tree

然后导入它并添加您的树形结构：

import { UncontrolledTreeEnvironment, Tree, StaticTreeDataProvider } from 'react-complex-tree';

<UncontrolledTreeEnvironment
  dataProvider={new StaticTreeDataProvider(longTree.items, (item, data) => ({ ...item, data }))}
  getItemTitle={item => item.data}
  viewState={{}}
>
  <Tree treeId="tree-1" rootItem="root" treeLabel="树形示例" />
</UncontrolledTreeEnvironment>;

更多详情请参阅入门指南。如何使用静态树数据提供器集成数据的指南也是理解如何将数据与React Complex Tree集成的好起点。

特性

无偏见 React Complex Tree 不对您的网页设计或您正在使用的任何技术做任何假设。渲染完全由您决定，每个写入 DOM 的节点都可以自定义。为了便于集成，提供了可通过轻松自定义的 CSS 类设置样式的合理默认值。
无障碍性

树结构符合 W3C 的无障碍树规范。它支持屏幕阅读器并实现了所有常见的键盘交互，因此每个交互（从移动焦点到拖动项目）都无需使用鼠标即可完成。
强大的拖放功能

该树提供了高级用户对先进工具的预期功能。您可以选择任意多个项目，并将它们拖动到同一棵树或任何其他树中的任何位置！React Complex Tree 提供了许多拖放自定义选项，例如禁止重新排序或仅启用某些项目的拖放。
完整的键盘控制

该树可以完全通过键盘控制。它实现了 W3C 建议的所有使树无障碍的控制，并为拖放、搜索或重命名项目提供了进一步的控制。
零依赖

我们知道添加一个包却最终得到数百个对等依赖是多么令人烦恼。由于 React Complex Tree 不对您的任何依赖做假设，我们也不需要用更多的包来使您的项目变得臃肿。当将 React Complex Tree 添加到您的包中时，您只添加它本身，不会有其他依赖。
多选功能

与其他更简单的树库不同，React Complex Tree 允许您选择任意多个项目，并通过拖动到不同位置一次性移动它们所有。为什么要为用户提供较少的功能，当您可以毫不费力地提供强大的树功能时？在上面的演示中试试看，按住键盘上的 Ctrl 键同时点击项目来选择多个项目，然后一次性将它们全部拖动到不同位置。
内置重命名功能

React Complex Tree 将重命名作为原生功能提供。选择任何项目并按 F2，即可开始重命名该项目。这为用户提供了一种更直观的重命名项目的方式，无需实现会中断用户工作流程的自定义对话框解决方案。
搜索功能

您是否曾试图在一个巨大的混乱文件树中找到那个您知道存在但不知道在哪里的文件？只需在聚焦树时开始输入，第一个匹配您搜索的项目就会显示出来。这也提高了树的无障碍性，因为仅使用键盘的用户可以更轻松地浏览树结构。
多树环境

您可以在您的 Web 应用中使用多个共享公共状态并能够相互交互的树。状态和树项目提供给一个公共的 React provider 组件，只需在 provider 下添加树组件，就可以轻松集成任意数量的树。这些树不需要提供自己的状态，它们只需要一个 ID 和它们的根项目，所有其他逻辑都由 provider 处理。
受控和非受控接口

使用 React Complex Tree 最简单的方法是使用非受控树环境，它自己维护树状态，即哪些项目被选中、展开等。您只需提供一个定义如何异步加载项目的数据提供者，环境会处理剩下的事情。但是，如果您想要更多控制，您可以使用受控环境以获得完全的可定制性。
由 React 和 TypeScript 驱动

React Complex Tree 由 React 驱动（废话），只需导入并使用提供的组件，就可以轻松集成到现有的 React 项目中。全面的类型信息以 TypeScript 接口的形式提供，这简化了集成过程并提供了额外的类型安全性，无论您的项目是否使用 TypeScript。