获取在 React 中工作的 mxGraph Hello World 示例

Question

我是 mxGraph 和 React 的初学者，想要在 React 中运行 mxGraph hello world 示例，只是为了基本了解我如何使用 mxGraph（和其他第三方库）。

我已经使用带有 typescript 模板的 create-react-app 开始了一个新的 React 项目，并使用 yarn add mxgraph.

安装了 mxGraph

我还没有找到任何官方打字稿类型，所以我不太确定应该如何导入该库才能开始使用它。

尝试像这样导入它

import * as mxGraph from "mxgraph";

给我

Could not find a declaration file for module '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-js 的 npm 包，即 npm mxgraph-js 似乎指的是旧版本的 mxgraph (3.6.0)。我们可以使用官方的 mxgraph，通过 npm 安装：npm install mxgraph。通过阅读用户手册弄清楚如何使用mxgraph后，我现在可以使用它了。这是我的 Hello World 示例代码：

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>          
        );
    }
}

获取在 React 中工作的 mxGraph Hello World 示例

Getting mxGraph Hello World example working in React

mxgraph

reactjs