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

Parameters:

This function does not accept any parameters.

Returns:

UpdateNodeInternals

Use this function to tell React Flow to update the internal state of one or more nodes that you have changed programmatically.

注释

🌐 Notes

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