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 /> 元件的子元件中使用。

鉤子工具