react中使用ztree

发现使用antd自带的tree控件有很多需求不能实现，比如手动修改节点后部分刷新功能，还有懒加载的情况下修改某个节点，实现局部刷新，自己写插件成本又大，干脆直接使用ztree,ztree的强大相信大家都知道 ztree官网--http://www.treejs.cn/v3/main.php

 1. 添加jquery

npm install jquery -S

import $ from 'jquery'

2. 下载ztree，引入ztree

npm install ztree

import zTree from 'zTree';

//样式文件一定不要忘了引入，不然会没有样式
import 'ztree/css/zTreeStyle/zTreeStyle.css';

3. 组件中初始化ztree

componentDidMount(){
    var setting = {
	    view: {
            showIcon: this.showIconForTree,
            showLine:true,
            fontCss : {color:"#666"}
		},
		data: {
			simpleData: {
				enable: true
			}
		}
    };
    var zNodes =[
		{ id:1, pId:0, name:"父节点1 - 展开"},
		{ id:11, pId:1, name:"父节点11 - 折叠"},
		{ id:111, pId:11, name:"叶子节点111"},
		{ id:112, pId:11, name:"叶子节点112"},
		{ id:113, pId:11, name:"叶子节点113"},
    ];
    $.fn.zTree.init($("#tree"), setting, zNodes);
}
showIconForTree(treeId, treeNode) {
    return !treeNode.isParent;
}
render() {
        return (
            <div>
                {/* 类名ztree一定要加上，不然也是没有样式 */}
                <ul id='tree' className="ztree"></ul>
            </div>
        );
    }

开始感受ztree的强大吧 

注：  如果使用过程中发现报错jQuery is not define   请参考https://blog.youkuaiyun.com/Chris__wang/article/details/85782166

【右上角点个赞，谢谢】