React树组件开发

发表于 | 更新于 | 分类于 | 评论数：


开发目的

项目中经常会用到树形控件，而且数据量较大，通常会达到上万的数据量，之前用的jQuery ztree 可以很好的满足以上要求，而自己目前也没有能力造一个满足这样要求的轮子，所以还是延用之前的ztree，然后在其之上封装成react component形式。

开发过程

首先我们新建一个项目目录，这里我们采用webpack umd打包方式，使其可以用于amd，cmd和全局引用.
项目目录是这样滴~
图片描述

src 中ztree-for-react.js 是源码，经过webpack编译打包后的文件会保存到lib目录中

webpack 配置如下图所示：
图片描述

接下来我们编写核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React,{Component} from 'react';
import $ from 'jquery';   //加载jQuery
import 'ztree';  //加载ztree
let ztreeIndex=0;
export default class ReactZtree extends Component{
  constructor(props){
    super(props);
  }
  componentDidMount(){
    this.renderZtreeDom();
  }
  componentDidUpdate(){
    this.renderZtreeDom();
  }
  componentWillUnmount(){
    this.ztreeObj.destory();
  }
  renderZtreeDom(){
    let ztreeObj = this.ztreeObj=$.fn.zTree.init(this.getTreeDom(),this.getTreeSetting(),this.props.nodes);
    return ztreeObj;
  }
  getTreeDom(){
    return $(this.refs.ztree);
  }
  getTreeSetting(){
    let props=this.props;
    return {
      treeId:props.treeId,
      treeObj:props.treeObj,
      async:props.async,
      callback:props.events,
      check:props.check,
      data:props.data,
      edit:props.edit,
      view:props.view
    }
  }
  getTreeObj(){
    return this.ztreeObj;
  }
  render(){
    return (
      <div className="ztree" ref="ztree" id={`ztree_${ztreeIndex++}`}>

      </div>
    )
  }
}

我们在componentDidMount 钩子函数中初始化ztree，利用getTreeSetting方法写入ztree的配置，将ztree的配置转换为React组件的props，当树节点或者配置更新时我们调用ztree distroy方法销毁ztree对象并且重新初始化ztree，这样就达到了当外部props属性改变是ztree可以自动刷新的效果,这样一个ztree组件就大功告成啦~

最后附上这个项目的github地址,喜欢的童鞋可以star或者fork，也非常欢迎提issues来帮忙进一步改进和完善这个组件。目前npm包也已经发布，有需要的同学可以使用npm安装:

1
npm install ztree-for-react