<Handle />

<Handle /> 元件用於您的自訂節點中，定義連接點。

import { Handle, Position } from '@xyflow/react';
 
export CustomNode = ({ data }) => {
  return (
    <>
      <div style={{ padding: '10px 20px' }}>
        {data.label}
      </div>
 
      <Handle type="target" position={Position.Left} />
      <Handle type="source" position={Position.Right} />
    </>
  );
};

Props

對於 TypeScript 使用者，<Handle /> 元件的 props 類型會匯出為 HandleProps。

名稱	類型	預設值
#`id?`	`string`
#`type`	`"source" \| "target"`
#`position`	`Position` handle 相對於節點的位置。在水平流程中，來源 handle 通常是 Position.Right，而在垂直流程中，它們通常是 Position.Top。
#`isConnectable?`	`boolean`	`true`
#`isConnectableStart?`	`boolean` 指示是否可以從此 handle 開始連線。	`type === "source"`
#`isConnectableEnd?`	`boolean` 指示是否可以將連線結束在此 handle 上。	`type === "target"`
#`onConnect?`	`(connection: Connection) => void`
#`isValidConnection?`	`(connection: Connection) => boolean` 當連線拖曳到此 handle 時呼叫。您可以使用此回呼，例如根據連線目標和來源執行一些自訂驗證邏輯。在可能的情況下，我們建議您將此邏輯移至主要 ReactFlow 元件上的 isValidConnection prop，以提高效能。

範例

帶驗證的自訂 handle

您可以透過包裝 <Handle /> 元件來建立自己的自訂 handle。此範例顯示一個自訂 handle，僅當連線來源符合給定的 id 時才允許連線。

import { Handle, Position } from '@xyflow/react';
 
export const TargetHandleWithValidation = ({ position, source }) => (
  <Handle
    type="target"
    position={position}
    isValidConnection={(connection) => connection.source === source}
    onConnect={(params) => console.log('handle onConnect', params)}
    style={{ background: '#fff' }}
  />
);

連接時的 handle 樣式

當連接線在 handle 上方時，handle 會收到額外的類別名稱 connecting，如果連線有效，則會收到 valid。您可以在此處找到一個使用這些類別的範例。

多個 handle

如果您需要多個來源或目標 handle，您可以透過建立自訂節點來實現。通常，您只需要使用節點的 id 作為邊的 source 或 target。如果您有多個來源或目標 handle，則需要將 id 傳遞給這些 handle。邊可以使用 sourceHandle 和 targetHandle 選項使用這些 id，以便您可以連接特定的 handle。如果您有一個 id = 1 的節點和一個 id = a 的 handle，您可以透過使用節點 source=1 和 sourceHandle=a 來連接此 handle。

動態 handle

如果您以程式設計方式變更自訂節點中 handle 的位置或數量，則需要使用 useUpdateNodeInternals hook 更新節點內部狀態。

您可以在自訂節點指南或自訂節點範例中找到如何實作具有多個控制點的自訂節點的範例。

自訂控制點樣式

由於控制點是一個 div，您可以使用 CSS 來設定其樣式，或傳遞 style 屬性來自訂控制點。您可以在邊緣拖放時新增節點和簡單浮動邊緣範例中看到這一點。

注意事項

如果您因為某些原因需要隱藏控制點，您必須使用 visibility: hidden 或 opacity: 0，而不是 display: none。這點很重要，因為 React Flow 需要計算控制點的尺寸才能正常運作，而使用 display: none 會回報寬度和高度為 0！

元件類型