react中如何实现简单树形结构的构建？介绍zTree

问题：需求是树形接口数据有多级结构，并且功能有增查删改重命名拖拽等~

使用场景：针对于react项目中,以为zTree使用起来特别方便，并且以为资料挺少的，因此，就作一个总结!

一：在react项目中若是引入zTree呢：

首先：npm install zTree --save

而后：import zTree from './zTree'

二：zTree的介绍：

一、zTree 是利用 JQuery 的核心代码，实现一套能完成大部分经常使用功能的 Tree 插件

二、zTree v3.0 将核心代码按照功能进行了分割，不须要的代码能够不用加载

三、采用了 延迟加载 技术，上万节点轻松加载，即便在 IE6 下也能基本作到秒杀

四、兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

五、支持 JSON 数据

六、支持静态 和 Ajax 异步加载节点数据

七、支持任意更换皮肤 / 自定义图标（依靠css）

八、支持极其灵活的 checkbox 或 radio 选择功能

九、提供多种事件响应回调

十、灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还能够多节点拖拽哟

十一、在一个页面内可同时生成多个 Tree 实例

十二、简单的参数配置实现 灵活多变的功能

三：核心的函数和属性介绍：

核心：zTree(setting, [zTreeNodes]) 这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而创建 Tree。

核心参数：setting zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置

相关配置以下：

东西和须要注意的地方有点多，你们有须要的能够参考官方网址哦~

四：下面将介绍重点zTree的详细资料：

zTree官方网址: www.ztree.me/v3/main.php…

zTree中demo演示： www.treejs.cn/v3/demo.php…

zTree中API文档：www.treejs.cn/v3/api.php

实现的效果以下所示：

文档中右侧有个文件路径，根据这个能够找到左侧中间效果的代码

备注：react项目中具体使用方式能够参考这个，实现的功能多，并且很方便，后续还会有补充~

目的：仅仅做为我的笔记使用，若是文中有不对的，欢迎随时指出，谢谢!