useUpdateNodeInternals

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

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>
    </>
  );
}

签名

名称	类型
#返回值
#	`(nodeId: 字符串 \| 字符串[]) => void` 使用此函数告诉 React Flow 更新您以编程方式更改的一个或多个节点的内部状态。

注意

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

钩子工具