Dagre 和 React-Flow 不会自动创建句柄（边缘源和目标）。 （树可视化）

Question

我正在使用 Dagre 和 React-flow 创建组件树可视化，不幸的是我遇到了一些困难。边缘是正确的，都具有源和目标的正确标识符，但是如果我不使用 react-flow-renderer 提供的 Handle 组件，则手柄（小点、边缘的连接点）不会出现。即使我设置了元素 targetPosition 和 sourcePosition 。我认为 el.targetPosition 和 el.sourcePosition 没有做任何事情。下面的大部分实现来自React-flow官网，他们没有使用Handle组件。句柄 ID 为空。

您还可以在下面找到快照。

1. 渲染元素

   {元素&& （
   
     
       元素={元素}
       节点类型={{reactComponent:ComponentNode}}
       onNodeMouseEnter={(_e, 节点) =>高亮组件（节点，假）}
       onNodeMouseLeave={(_e, 节点) =>删除突出显示（节点）}
       onPaneClick={重置突出显示}
     >
   
     
   
   

2. 其余代码

   constpositionElements = (元素, dagreGraph, 方向) => {
     返回 elements.forEach((el) => {
       if (isNode(el)) {
         if (方向 === GraphLabels.topToBottom) {
           dagreGraph.setNode(el.id, {
            宽度：节点宽度，
            高度：baseNodeHeight + el.data.linesOfCode，
          });
        }
      } 别的 {
        dagreGraph.setEdge(el.source, el.target);
      }
    });
   };
   
   
   导出 const getLayoutedElements = (元素, 方向) => {
   const dagreGraph = new dagre.graphlib.Graph(); // 构建图表
   dagreGraph.setDefaultEdgeLabel(() => ({}));
   dagreGraph.setGraph({rankdir: 方向 });
   
   positionElements(元素、dagreGraph、方向);
   
   dagre.layout(dagreGraph);
   
   返回 elements.map((el) => {
    if (isNode(el)) {
      const nodeWithPosition = dagreGraph.node(el.id);
      垂直缩放
      如果（方向== GraphLabels.leftToRight）{
        做这个。
      }
      如果（方向== GraphLabels.topToBottom）{
        el.targetPosition = '底部';
        el.sourcePosition = '顶部';
        el.位置 = {
          x：一些值，
          y：一些其他值，
        };
      }
     }
   
    返回el；
    });
   };