问How / mxGraph:如何从外部源呈现带有功能React组件的图形？

EN

import React, { useEffect, useCallback } from 'react';
import { StyledTestComponent} from '../styles/TestComponent.styled';
import mxgraph from 'mxgraph';

const {
    mxGraph,
    mxGraphModel,
    // mxDragSource,
    // mxUndoManager,
    // mxCompactTreeLayout,
    // mxGraphHandler,
    // mxGuide,
    // mxEdgeHandler,
    // mxEdgeStyle,
    // mxConstraintHandler,
    // mxEvent,
    // mxImage,
    // mxConstants,
    // mxKeyHandler,
    // mxRubberband,
    // mxPerimeter,
    mxUtils,
    // mxVertexHandler,
    mxClient,
    mxCodec,
} = mxgraph();
  
const DiagramRenderer = () => {
    useEffect(() => {
        console.log('Hello from useEffect');
    }, []);

    const xml =
        '<root><mxCell id="2" value="Hello," vertex="1"><mxGeometry x="20" y="20" width="80" height="30" as="geometry"/></mxCell><mxCell id="3" value="World!" vertex="1"><mxGeometry x="200" y="150" width="80" height="30" as="geometry"/></mxCell><mxCell id="4" value="" edge="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell></root>';

    if (!mxClient.isBrowserSupported()) {
        mxUtils.error('Browser is not supported!', 200, false);
    }

    let graph = null;

    const containerRef = useCallback((container) => {
        if (container !== null) {
            let model = new mxGraphModel();
            graph = new mxGraph(container, model); 
            // const parent = graph.getDefaultParent();
            let doc = mxUtils.parseXml(xml); 
            let codec = new mxCodec(doc);

            codec.decode(doc.documentElement, graph.getModel());

            graph.getModel().beginUpdate();

            try {
                //     const v1 = graph.insertVertex(
                //         parent,
                //         null,
                //         'Hello',
                //         100,
                //         100,
                //         300,
                //         100
                //     );
                //     const v2 = graph.insertVertex(
                //         parent,
                //         null,
                //         'World',
                //         500,
                //         100,
                //         300,
                //         100
                //     );
                //     graph.insertEdge(parent, null, '', v1, v2);

                var elt = doc.documentElement.firstChild;
                var cells = [];

                while (elt !== null) {
                    cells.push(codec.decodeCell(elt));
                    elt = elt.nextSibling;
                }

                graph.addCells(cells);
            } finally {
                graph.getModel().endUpdate();
            }
        }
    }, []);

    return (
        <StyledTestComponent>
            <div ref={containerRef}></div>
        </StyledTestComponent>
    );
};

export default TestComponent;