useUpdateNodeInternals()

以编程方式添加或删除节点的句柄或更新节点的句柄位置时，你需要使用此钩子让 React Flow 知道这一点。这将更新节点的内部尺寸，并在必要时正确重新定位画布上的句柄。

¥When you programmatically add or remove handles to a node or update a node’s handle position, you need to let React Flow know about it using this hook. This will update the internal dimensions of the node and properly reposition handles on the canvas if necessary.


import { useCallback, useState } from 'react';
import { Handle, useUpdateNodeInternals } from '@xyflow/react';
 
export default function RandomHandleNode({ id }) {
  const updateNodeInternals = useUpdateNodeInternals();
  const [handleCount, setHandleCount] = useState(0);
  const randomizeHandleCount = useCallback(() => {
    setHandleCount(Math.floor(Math.random() * 10));
    updateNodeInternals(id);
  }, [id, updateNodeInternals]);
 
  return (
    <>
      {Array.from({ length: handleCount }).map((_, index) => (
        <Handle
          key={index}
          type="target"
          position="left"
          id={`handle-${index}`}
        />
      ))}
 
      <div>
        <button onClick={randomizeHandleCount}>Randomize handle count</button>
        <p>There are {handleCount} handles on this node.</p>
      </div>
    </>
  );
}

签名

¥Signature

Name	Type
#Returns
#	`(nodeId: string \| string[]) => void` Use this function to tell React Flow to update the internal state of one or more nodes that you have changed programmatically.

注释

¥Notes

此钩子只能在作为 <ReactFlowProvider /> 或 <ReactFlow /> 组件的子组件中使用。

¥This hook can only be used in a component that is a child of a <ReactFlowProvider /> or a <ReactFlow /> component.