React配置mxgraph

React配置mxgraph

公司要实现svg作图的功能，需要使用mxgraph，但公司的前端框架是react，网上有一些react整合mxgraph的教程，但都不是很完整，自己整理了一下。

// package.json
"devDependencies": {
    "copy-webpack-plugin": "^5.0.3"
},
"dependencies": {
    "mxgraph": "^4.1.1"
}

// webpack.config.js plugins里加入，to的路径和代码里的mxBasePath要保持一致，不然会有一堆资源文件404
new copyWebpackPlugin([
   // mxgraph
   {
     from: path.resolve(__dirname, "node_modules/mxgraph/javascript/src"),
     to: "mxgraph",
   },
 ]),

import * as React from "react";
const mx = require("mxgraph")({
  mxBasePath: "mxgraph",
});
const { mxGraph } = mx;

type IMXProps = {
  style?: React.CSSProperties;
};

export const MX = ({ style }: IMXProps): React.ReactElement => {
  const [graph, setGraph] = React.useState<any>(n