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

react

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

使用场景：针对于react项目中,觉得zTree使用起来特别方便，而且觉得资料挺少的，所以，就做一个总结哈~

一：在react项目中如果引入zTree呢：

首先：npm install zTree --save

然后：import zTree from './zTree'

二：zTree的介绍：

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

2、zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载

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

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

5、支持 JSON 数据

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

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

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

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

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

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

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

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

核心：zTree(setting, [zTreeNodes])

这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。

核心参数：setting

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