react complex tree下载 - react complex tree源代码下载

react complex tree

其他源码

2.4.6

下载

反应复杂树

具有多选和拖放功能的无主见可访问树组件

查看官方文档以查看更多示例和更全面的文档。常见问题解答页面涵盖了许多常见问题或疑问。

变更日志可在 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 = "Tree Example" / >
< / UncontrolledTreeEnvironment > ;

更多详细信息请参阅入门指南。有关如何将数据与静态树数据提供程序集成的指南也是了解如何将数据与 React Complex Tree 集成的一个很好的起点。

特征

不固执己见
React Complex Tree 不会对您的网页设计的任何美观或您正在使用的任何技术做出任何假设。渲染完全由您决定，写入 DOM 的每个节点都可以自定义。提供了由易于定制的 CSS 类设计的合理默认样式，以简化集成。
无障碍
树结构符合 W3C 可访问树的规范。它支持屏幕阅读器并实现所有常见的键盘交互，因此从移动焦点到拖动项目的每个交互都可以在不使用鼠标的情况下实现。
强大的拖放功能
该树提供了高级用户期望从高级工具获得的预期功能。选择任意数量的项目，然后将它们拖动到同一棵树或任何其他树中的任何位置！ React Complex Tree 附带了许多用于拖放的自定义选项，例如禁止重新排序或仅允许对某些项目进行拖放。
全键盘控制
这棵树完全可以通过键盘控制。它实现了 W3C 建议的所有控件以使树可访问，并提供了用于拖放、搜索或重命名项目的进一步控件。
零依赖
我们知道添加一个包并最终产生数百个对等依赖项是多么烦人。因为 React Complex Tree 不会对您的任何依赖项做出任何假设，所以我们也不需要用更多的包来扰乱您的项目。将 React Complex Tree 添加到包中时，您只添加它，而不添加其他依赖项。
多重选择
与其他更简单的树库不同，React Complex Tree 允许您选择任意数量的项目，并通过拖动到不同的位置来一次性移动它们。当您无需额外努力即可提供强大的树功能时，为什么还要为用户提供较少的功能呢？在上面的演示中尝试一下，通过按住键盘上的控件并单击项目来一次选择多个项目，然后将所有项目一次拖动到不同的位置。
重命名内置
React Complex Tree 以其功能提供了重命名为本机功能。选择任意项目并按 F2，开始重命名该项目。这为用户提供了一种更直观的重命名项目的方法，而无需实施对用户工作流程造成更大干扰的自定义对话框解决方案。
搜索功能
您是否曾经尝试过在一棵巨大的混乱文件树中找到一个文件，您知道它在那里，但不知道在哪里？只需在聚焦树的同时开始输入，第一个与您的搜索匹配的项目就会显示出来。这也提高了树的可访问性，因为仅使用键盘的用户可以更轻松地导航树结构。
多树环境
您可以在 Web 应用程序上使用多个树，它们共享一个公共状态，并且能够相互交互。状态和树项被提供给一个公共的 React 提供程序组件，并且只需在提供程序下方添加树组件即可轻松集成任意数量的树。树不需要提供自己的状态，它们只需要一个 ID 和它们的根项，所有其他逻辑都由提供者处理。
受控和非受控接口
使用 React Complex Tree 最简单的方法是使用不受控制的树环境来维护树状态，即哪些项目本身被选择、展开等。您只需要提供一个数据提供程序来定义如何异步加载项目，其余的工作由环境完成。但是，如果您想要更多控制，您可以使用受控环境进行完全可定制。
由 React 和 TypeScript 提供支持
React Complex Tree 由 React (duh) 提供支持，只需导入和使用提供的组件即可轻松集成到现有的 React 项目中。全面的类型信息以 TypeScript 接口的形式提供，无论您是否在项目中使用 TypeScript，都可以简化集成并提供额外的类型安全性。