Estoy creando una visualización de árbol de componentes con Dagre y React-flow y, lamentablemente, tengo algunas dificultades. Los bordes son correctos, todos tienen los identificadores correctos para el origen y el destino, pero si no uso el componente Handle proporcionado por react-flow-renderer , los controladores (puntos pequeños, puntos de conexión para los bordes) no aparecerán . Incluso cuando configuro el elemento targetPosition y sourcePosition . Creo que el.targetPosition y el.sourcePosition no hacen nada. La mayor parte de la implementación a continuación proviene del sitio web oficial de React-flow y no usan componentes de Handle . El identificador de identificador es nulo.

También puede encontrar una instantánea a continuación.

1. renderizando los elementos

    {elements && ( <ReactFlowProvider> <ReactFlow elements={elems} nodeTypes={{ reactComponent: ComponentNode }} onNodeMouseEnter={(_e, node) => highlightComponent(node, false)} onNodeMouseLeave={(_e, node) => removeHighlight(node)} onPaneClick={resetHighlight} > </ReactFlow> </ReactFlowProvider>

2. Resto del código

    const positionElements = (elements, dagreGraph, direction) => { return elements.forEach((el) => { if (isNode(el)) { if (direction === GraphLabels.topToBottom) { dagreGraph.setNode(el.id, { width: nodeWidth, height: baseNodeHeight + el.data.linesOfCode, }); } } else { dagreGraph.setEdge(el.source, el.target); } }); }; export const getLayoutedElements = (elements, direction) => { const dagreGraph = new dagre.graphlib.Graph(); // building the graph dagreGraph.setDefaultEdgeLabel(() => ({})); dagreGraph.setGraph({ rankdir: direction }); positionElements(elements, dagreGraph, direction); dagre.layout(dagreGraph); return elements.map((el) => { if (isNode(el)) { const nodeWithPosition = dagreGraph.node(el.id); Vertical scaling if (direction == GraphLabels.leftToRight) { do this. } if (direction == GraphLabels.topToBottom) { el.targetPosition = 'bottom'; el.sourcePosition = 'top'; el.position = { x: someValue, y: someOtherValue, }; } } return el; }); };