React中使用Qunee组件

2024-10-12 react vite

React中使用Qunee组件，通过传入回调函数获取graph对象

Graph.jsx

import {useEffect, useRef} from "react";
import Q from 'https://demo.qunee.com/lib/qunee-es.js'

export function Graph({onload}) {
    const ref = useRef();
    useEffect(() => {
        let graph = new Q.Graph(ref.current);
        graph.canvasPanel.style.flexGrow = '1';
        onload && onload(graph);
        return () => {
            graph.destroy();
        }
    }, [])

    return (
        <div ref={ref} style={{display: 'flex', flexDirection: 'column', flexGrow: '1', minHeight: '300px'}}/>
    );
}

main.jsx

import {StrictMode} from 'react'
import {createRoot} from 'react-dom/client'
import {Graph} from "./Graph.jsx";

function onGraphLoad(graph){
    graph.createNode('Qunee by React');
}

createRoot(document.body).render(
    <StrictMode>
        <Graph onload={onGraphLoad}/>
    </StrictMode>,
)

index.html

<head>
    <meta charset="UTF-8"/>
    <title>Hello World</title>
    <style>
        body {
            margin: 0px;
            position: absolute;
            inset: 0px;
            display: flex;
        }
    </style>
</head>
<body>
<script type="module" src="src/main.jsx"></script>
</body>

使用vite部署运行如下，项目代码下载 - qunee_by_react.zip