React Flow折叠含嵌套Handle的节点后Edge位置不更新问题

问题根源 #

你手动给Handle设置了position: absolute和left这类自定义定位样式，干扰了React Flow内置的Handle位置计算机制；同时折叠状态切换时，节点尺寸变化没有正确触发React Flow的Edge位置更新逻辑。

具体解决方案 #

1. 移除Handle的自定义定位样式，改用内置属性调整位置
   删掉style里的left、position: absolute，用React Flow提供的offset属性调整Handle的位置，让其跟随节点尺寸自动更新：

   {!node.children && (
     <Handle
       type="source"
       position={Position.Right}
       id={node.id}
       style={{ background: 'blue' }}
       offset={[10, 0]} // 用offset替代手动left，控制距离右侧的偏移量
     />
   )}
   

2. 在折叠状态变化时，确保触发节点内部状态更新
   用useEffect监听折叠状态的变化，每次状态切换后调用useUpdateNodeInternals强制React Flow重新计算节点和Handle的位置：

   import { useUpdateNodeInternals } from 'reactflow';
   
   const CustomTreeNode = ({ node, data }) => {
     const [isCollapsed, setIsCollapsed] = useState(data.isCollapsed || false);
     const updateNodeInternals = useUpdateNodeInternals();
   
     const toggleCollapse = () => {
       setIsCollapsed(prev => !prev);
     };
   
     // 监听折叠状态，变化时强制更新节点内部信息
     useEffect(() => {
       updateNodeInternals(node.id);
     }, [isCollapsed, updateNodeInternals, node.id]);
   
     return (
       <div className={`tree-node ${isCollapsed ? 'collapsed' : ''}`}>
         <button onClick={toggleCollapse}>{isCollapsed ? '+' : '-'}</button>
         <span>{data.label}</span>
         {/* 叶子节点显示Handle */}
         {!node.children && (
           <Handle
             type="source"
             position={Position.Right}
             id={node.id}
             style={{ background: 'blue' }}
             offset={[10, 0]}
           />
         )}
         {/* 展开时渲染子节点 */}
         {!isCollapsed && node.children && (
           <div className="node-children">
             {node.children.map(child => (
               <CustomTreeNode key={child.id} node={child} data={child.data} />
             ))}
           </div>
         )}
       </div>
     );
   };
   

3. 确保节点容器尺寸正确计算
   自定义节点的根容器不要用position: absolute脱离文档流，保证React Flow能正确获取节点的实际宽高，否则无法准确计算Handle和Edge的位置。

核心逻辑 #

React Flow的Edge位置依赖节点和Handle的实时布局信息，手动定位会打破这个自动计算链路；通过offset控制Handle位置，配合状态变化时强制更新节点内部状态，就能让Edge跟随Handle的移动自动调整位置。

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