通过jsmind在react项目上来实现思维导图的效果

 话不多说，直接上代码，搜罗了下对应的属性，方便后面进行会看

import { Badge, Descriptions, Table, Button, Popconfirm, message } from 'antd';
import { useEffect, useState } from 'react';
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind/js/jsmind'
// window.jsmind=jsMind;
export default function MiaoshuList() {
    const listStyle = {
        color: 'red',
        backgroundColor: 'black'
    }
    useEffect(() => {
        writeMind()
    }, [])
    const [jms, setJm] = useState(null)//用来存储js获取不到的问题
    let jm = null;
    const writeMind = () => {
        let mind = {
            meta: {
                name: "jsMind-demo-tree",
                author: "hizzgdev@163.com",
                version: "0.2",
            },
            /* 数据格式声明 */
            format: "node_tree",
            /* 数据内容 */
            data: {
                id: "root",
                topic: "测试使用",//思维导图表名
                children: [
                    {
                        id: "easyss",
                        topic: "Easyss",//下级的表名
                        direction: "right",
                        expanded: true,//默认是否展开
                        children: [
                            { id: "easy1", topic: "Easy to show" },
                            { id: "easy2", topic: "Easy to edit" },
                            { id: "easy3", topic: "Easy to store" },
                            { id: "easy4", topic: "Easy to embed" },
                        ],
                    },
                    {
                        id: "open",
                        topic: "Open Source",
                        direction: "right",
                        expanded: true,
                        children: [
                            { id: "open1", topic: "on GitHub" },
                            { id: "open2", topic: "BSD License" },
                        ],
                    },
                    {
                        id: "powerful",
                        topic: "Powerful",
                        direction: "right",
                        children: [
                            { id: "powerful1", topic: "Base on Javascript" },
                            { id: "powerful2", topic: "Base on HTML5" },
                            { id: "powerful3", topic: "Depends on you" },
                        ],
                    },
                    {
                        id: "other",
                        topic: "test node",
                        direction: "left",
                        children: [
                            { id: "other1", topic: "I'm from local variable" },
                            { id: "other2", topic: "I can do everything" },
                        ],
                    },
                ],
            },

        }

        let options = {
            container: "jsmind_container",// [必选] 容器的ID，或者为容器的对
            editable: true,//是否启用编辑 
            theme: "orange",//主题 
            view: {
                line_width: 2, // 思维导图线条的粗细
                line_color: "#ccc" // 思维导图线条的颜色
            },
            // mode: 'side',// 显示模式，子节点只分布在根节点右侧
            menuOpts: {
                showMenu: true,
            },
        };
        jm = new jsMind(options);
        jm.show(mind);
        setJm(jm)

        //   this.jm.show(mind);

    }

    //放大
    const zoomIn = () => {
        console.log('fada', jms)
        jms.view.zoomIn();//这里使用useState来存储jm信息,原生拿去不到
    }
    //缩小
    const zoomOut = () => {
        jms.view.zoomIn();//这里使用useState来存储jm信息,原生拿去不到
    }
    //展开到指定层级
    const showNum = () => {
        console.log('jms', jms)
        jms.expand_to_depth(1)//展开到指定几级菜单
    }
    return (

        <>

            <div>

                <div onClick={() => zoomIn()}>
                    放大
                </div>
                <div onClick={() => zoomOut()}>
                    缩小
                </div>
                <div onClick={() => showNum()}>展开到指定层级</div>
                <div id='jsmind_container' style={{ width: '100%', height: '500px' }}>
                </div>
            </div>
        </>
    )
}

··