让mxGraph Hello示例在React中工作

Question

我是一个mxGraph和React初学者，我想让mxGraph你好世界示例在React中工作，只是为了了解如何使用mxGraph (和其他第三方库)。

我已经开始了一个新的反应项目使用创建-反应-应用程序与类型记录模板，并安装了mxGraph与yarn add mxgraph。

我还没有找到任何正式的打字稿，所以我不太确定如何导入库才能开始使用它。

试图像这样导入它

import * as mxGraph from "mxgraph";

给我

找不到模块“mxgraph”的声明文件。

也试过

const mxGraph = require("mxgraph");

但这也没用..。

所以我有点困惑，甚至不知道该怎么开始。

有人能帮我把事情做好吗？

谢谢!

Answer 1

我就是这么让它起作用的。不确定这是否完全正确，但我想这是个开始。

import React, { useEffect, useRef } from "react";
import { mxGraph, mxRubberband, mxClient, mxUtils, mxEvent } from "mxgraph-js";

const App: React.FC = () => {
  const divGraph = useRef(null);

  useEffect(() => {
    if (!mxClient.isBrowserSupported()) {
      mxUtils.error("Browser is not supported!", 200, false);
    } else {
      mxEvent.disableContextMenu(divGraph.current);
      const graph = new mxGraph(divGraph.current);
      new mxRubberband(graph);
      const parent = graph.getDefaultParent();
      graph.getModel().beginUpdate();

      try {
        const v1 = graph.insertVertex(parent, null, "Hello,", 20, 20, 80, 30);
        const v2 = graph.insertVertex(parent, null, "World!", 200, 150, 80, 30);
        const e1 = graph.insertEdge(parent, null, "", v1, v2);
      } finally {
        graph.getModel().endUpdate();
      }
    }
  });

  return <div className="graph-container" ref={divGraph} id="divGraph" />;
};

export default App;

Answer 2

不需要使用名为mxgraph的npm包，即npm图-js，它似乎是指mxgraph的旧版本(3.6.0)。通过npm：npm install mxgraph安装，我们可以使用官方的We图。在了解了如何通过阅读用户手册来使用it图之后，我现在可以使用它了。以下是Hello示例的代码：

import React, {Component} from "react"

var mxnspaceobj = require("mxgraph")({
    mxImageBasePath: "mxgraph/javascript/src/images",
    mxBasePath: "mxgraph/javascript/src"
})
// The manual tells the above factory function returns a "namespace" object 
// that has access to all objects of the mxgraph package. Here I give it a name
// mxnspaceobj, although we can use any valid name. We will use this object,
// including when calling mxGraph constructor.

export default class MyMxGraph extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        //let mxClient = mxnspaceobj.mxClient
        let mxRubberband = mxnspaceobj.mxRubberband
        let mxKeyHandler = mxnspaceobj.mxKeyHandler        
        let mxUtils = mxnspaceobj.mxUtils
        let mxEvent = mxnspaceobj.mxEvent

        const container = document.querySelector("#mxcontainer")        
    
        // Now, the tricky one, because most examples codes directly use the 
        // following statement :
        // let graph = new mxGraph(container); 
        // which will fail.
    
        // Instead, we have to call the mxGraph constructor via mxnspaceobj
        // variable as follows :
        let graph = new mxnspaceobj.mxGraph(container);

        // -- The rest is the same as usually found in examples -- //

        new mxRubberband(graph);
        let parent = graph.getDefaultParent();

        graph.getModel().beginUpdate();
        try {
            const v1 = graph.insertVertex(parent, null,
               'Hello,', 20, 20, 80, 30);
            const v2 = graph.insertVertex(parent, null,
               'World!', 200, 150, 80, 30);
            const e1 = graph.insertEdge(parent, null, '', v1, v2);
        } finally {
            graph.getModel().endUpdate();
        }
    }

    render(){
        return (
            <div id="mxcontainer" style={{height:"400px", width:"1200px"}}>
                <h3>Created using mxgraph</h3>
            </div>          
        );
    }
}