react实现对ztree的初始化

import React, {Component} from 'react';
import '../../../static/scss/manager/resourceManagerComponent/atlasManagementComponent.scss'
import $ from '../../common/tool/jquery-vendor'
import 'ztree'
import 'ztree/js/jquery.ztree.core.min'
import 'ztree/js/jquery.ztree.excheck.min'
import 'ztree/js/jquery.ztree.exedit.min'
import 'ztree/css/zTreeStyle/zTreeStyle.css'
import '../../../static/scss/zTreeStyle.scss'
import {Form, Input} from "antd";
import Button from "antd/es/button";
import AtlasTableComponents from "../../common/atlasTableComponents";

class AtlasManagementComponent extends Component {
    componentDidMount() {
        this.init()
    }

    init = () => {
        let zTreeObj,
            setting = {
                view: {
                    selectedMulti: false,
                    showIcon: false,//去掉图标
                    showLine: true,
                    nameIsHTML: true,
                    addHoverDom: (treeId, treeNode) => this.addHoverDom(treeId, treeNode), //当鼠标移动到节点上时，显示用户自定义控件
                    removeHoverDom: (treeId, treeNode) => this.removeHoverDom(treeId, treeNode), //离开节点时的操作
                    // fontCss: getFontCss //个性化样式

                },
                check: {
                    chkStyle: 'checkbox',//复选框类型
                    enable: true,//每个节点是否显示checkbox
                    chkboxType: {
                        'Y': 'ps',
                        'N': 'ps'
                    }
                },
                edit: {
                    enable: true,
                    editNameSelectAll: true,
                    showRemoveBtn: false, //true表示显示删除按钮
                    showRenameBtn: false,//true显示修改按钮
                    drag: {
                        isCopy: false,
                    }
                },
            },
            zTreeNodes = [
                {
                    "name": "矿产", open: true, tId: '1',
                    children: [
                        {"name": "地层地质年代", tId: '11',},
                        {"name": "地质作用", tId: '12',},
                        {"name": "构造类型", tId: '13',}
                    ],
                },
                {
                    "name": "行政区划分", open: false, tId: '2',
                    children: [
                        {"name": "渭南", tId: '22',},
                        {"name": "商洛", tId: '23',},
                        {"name": "榆林", tId: '24',}
                    ],
                }
            ];

        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);

        });
    }
    //鼠标移入显示增加删除
    addHoverDom = (treeId, treeNode) => {
        let sObj = $("#" + treeNode.tId + "_span"); //获取节点信息
        if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
        let addStr = "<span class='iconfont iconjia add' id='addBtn_" + treeNode.tId + "' title='添加'/>" +
            "<span class='iconfont iconzhandianmingbainji add' id='addBtn_" + treeNode.tId + "' title='修改'/>" +
            "<span class='iconfont iconshanchu add' id='addBtn_" + treeNode.tId + "' title='删除'/>"
        sObj.after(addStr); //加载添加按钮
        let btn = $('#addBtn_' + treeNode.tId);
        // //绑定添加事件，并定义添加操作
        if (btn) {
            btn.find('.add').bind('click', () => this.addCatalog(treeNode));
        }
    };
    removeHoverDom = (treeId, treeNode) => {
        $('#addBtn_' + treeNode.tId).unbind().remove();
    };

    render() {
        return (
            <div className='atlasManagementModule'>
                <div className="atlasAside">
                    <div className='title'>
                        <h3>图层目录</h3>
                        <button>添加根目录</button>
                    </div>
                    <ul id="tree" className="ztree" style={{width: "230px", overflow: 'auto'}}/>
                </div>
                <div className="atlasSection">
                    <div className="sectionTitle">
                        <Form name="horizontal_login" layout="inline" onFinish={this.onFinish}>
                            <Form.Item name="username" label='目录筛选'>
                                <Input placeholder="请刷入筛选内容"/>
                            </Form.Item>
                            <Form.Item wrapperCol={{offset: 8, span: 24}}>
                                <Button type="primary" htmlType="submit"> 查询 </Button>
                                <Button> 重置 </Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <div className="sectionContent">
                        <h3>查询列表</h3>
                        <AtlasTableComponents/>
                    </div>
                </div>
            </div>
        );
    }
}

export default AtlasManagementComponent;

 

<ul id="tree" className="ztree customZTreeStyle"
    style={{width: "230px", overflow: 'auto'}}/>