在VueJS中使用react-digraph遇错误，求解决方案及替代库

需求背景 #

• 开发一款管理数据库父子层级结构的交互式可编辑UI工具，要求支持子节点多父级
• 对比多款库后选定react-digraph，若有更适配Vue技术栈的工具欢迎推荐

当前问题 #

技术栈以VueJS为主，搭建了Vue CLI + TypeScript测试项目，通过veaury库集成react-digraph时出现报错（无错误截图）

依赖配置（package.json） #

"core-js": "^3.6.5",
"react": "^18.2.0",
"react-digraph": "^8.1.0",
"react-dom": "^18.2.0",
"veaury": "^2.3.11",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vuex": "^4.0.0-0"

代码实现（GraphEditor.vue） #

<template>
  <div style="height: 500px; width: 100%; background-color: black">
    <Graph
      :nodeKey="nodeKey"
      :nodes="nodes"
      :edges="edges"
      :selected="selected"
      :nodeTypes="graphConfig.NodeTypes"
      :nodeSubtypes="graphConfig.NodeSubTypes"
      :edgeTypes="graphConfig.EdgeTypes"
      :allowMultiselect="true"
      @onSelect="emptyFunc"
      @onCreateNode="emptyFunc"
      @onUpdateNode="emptyFunc"
      @onDeleteNode="emptyFunc"
      @onCreateEdge="emptyFunc"
      @onSwapEdge="emptyFunc"
      @onDeleteEdge="emptyFunc"
    />
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { applyPureReactInVue } from "veaury";
import { GraphView } from "react-digraph";
import { ref } from "vue";

@Options({
  components: {
    Graph: applyPureReactInVue(GraphView),
  },
})
export default class GraphEditor extends Vue {
  private nodeKey = "id";
  private graphConfig = {
    NodeTypes: {
      empty: {
        // required to show empty nodes
        typeText: "None",
        shapeId: "#empty", // relates to the type property of a node
        shape: ref(
          '<symbol viewBox="0 0 100 100" id="empty" key="0"><circle cx="50" cy="50" r="45"></circle></symbol>'
        ),
      },
      custom: {
        // required to show empty nodes
        typeText: "Custom",
        shapeId: "#custom", // relates to the type property of a node
        shape: ref(
          '<symbol viewBox="0 0 50 25" id="custom" key="0"><ellipse cx="50" cy="25" rx="50" ry="25"></ellipse></symbol>'
        ),
      },
    },
    NodeSubtypes: {},
    EdgeTypes: {
      emptyEdge: {
        // required to show empty edges
        shapeId: "#emptyEdge",
        shape: ref(
          '<symbol viewBox="0 0 50 50" id="emptyEdge" key="0"><circle cx="25" cy="25" r="8" fill="currentColor">{" "}</circle></symbol>'
        ),
      },
    },
  };

  private emptyFunc(e: any) {
    console.log();
  }

  private nodes = [
    {
      id: 1,
      title: "Node A",
      x: 258.3976135253906,
      y: 331.9783248901367,
      type: "empty",
    }
  ];
  private edges = [];
  private selected = [];
}
</script>
<style scoped lang="scss"></style>

解决方案 #

1. 修复shape属性的响应式包裹问题 #

react-digraph的shape属性接受字符串类型，不需要用Vue的ref包裹。将所有shape: ref('...')改为直接赋值字符串：

// 示例修改
empty: {
  typeText: "None",
  shapeId: "#empty",
  shape: '<symbol viewBox="0 0 100 100" id="empty" key="0"><circle cx="50" cy="50" r="45"></circle></symbol>',
},

2. 修正EdgeTypes中的语法错误 #

原EdgeTypes里的shape字符串包含多余的{" "}，删除后改为：

emptyEdge: {
  shapeId: "#emptyEdge",
  shape: '<symbol viewBox="0 0 50 50" id="emptyEdge" key="0"><circle cx="25" cy="25" r="8" fill="currentColor"></circle></symbol>',
},

3. 版本兼容性检查 #

react-digraph@8.1.0的文档显示其适配React 16+，但React 18的并发特性可能导致兼容问题。可以尝试降级React版本到17.x：

npm install react@^17.0.2 react-dom@^17.0.2 --save

4. Vue生态替代工具推荐 #

如果跨框架集成成本过高，推荐以下Vue原生库：

• vue-flow：专为Vue3打造的流程图库，支持多父节点、拖拽编辑、节点自定义，TypeScript支持完善，生态成熟
• antv/x6：阿里开源的图编辑引擎，提供Vue3封装，支持复杂层级结构、多父节点，适合构建专业级图编辑工具

内容的提问来源于stack exchange，提问作者SergeyLazarev