项目中经常会用到树形控件，而且数据量较大，通常会达到上万的数据量，之前用的jQuery ztree 可以很好的满足以上要求，而自己目前也没有能力造一个满足这样要求的轮子，所以还是延用之前的ztree，然后在其之上封装成react component形式。
开发过程首先我们新建一个项目目录，这里我们采用webpack umd打包方式，使其可以用于amd，cmd和全局引用.
项目目录是这样滴~
src 中ztree-for-react.js 是源码，经过webpack编译打包后的文件会保存到lib目录中
webpack 配置如下图所示：
接下来我们编写核心代码：
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 (
)
}
}
我们在componentDidMount 钩子函数中初始化ztree，利用getTreeSetting方法写入ztree的配置，将ztree的配置转换为React组件的props，当树节点或者配置更新时我们调用ztree distroy方法销毁ztree对象并且重新初始化ztree，这样就达到了当外部props属性改变是ztree可以自动刷新的效果,这样一个ztree组件就大功告成啦~
最后附上这个项目的github地址,喜欢的童鞋可以star或者fork，也非常欢迎提issues来帮忙进一步改进和完善这个组件。目前npm包也已经发布，有需要的同学可以使用npm安装:
npm install ztree-for-react
