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

プロパティ

TypeScriptユーザー向けに、<Handle />コンポーネントのprops型はHandlePropsとしてエクスポートされます。

名前	型	デフォルト
#`id?`	`string`
#`type`	`"source" \| "target"`
#`position`	`Position` ノードに対するハンドルの相対的な位置。水平方向のフローでは、通常、ソースハンドルはPosition.Rightであり、垂直方向のフローでは、通常、Position.Topです。
#`isConnectable?`	`boolean`	`true`
#`isConnectableStart?`	`boolean` このハンドルから接続を開始できるかどうかを指示します。	`type === "source"`
#`isConnectableEnd?`	`boolean` このハンドルで接続を終了できるかどうかを指示します。	`type === "target"`
#`onConnect?`	`(connection: Connection) => void`
#`isValidConnection?`	`(connection: Connection) => boolean` 接続がこのハンドルにドラッグされたときに呼び出されます。このコールバックを使用して、接続のターゲットとソースに基づいて、例えば、いくつかのカスタム検証ロジックを実行できます。可能な限り、パフォーマンス上の理由から、このロジックをメインのReactFlowコンポーネントのisValidConnectionプロパティに移動することをお勧めします。

例

検証付きのカスタムハンドル

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

接続時のハンドルをスタイルする

ハンドルは、接続線がハンドルの上にある場合は追加のクラス名connecting、接続が有効な場合はvalidを受け取ります。これらのクラスを使用する例はこちらにあります。

複数のハンドル

複数のソースまたはターゲットハンドルが必要な場合は、カスタムノードを作成することでこれを実現できます。通常、エッジのsourceまたはtargetにはノードのIDを使用するだけです。複数のソースまたはターゲットハンドルがある場合は、これらのハンドルにIDを渡す必要があります。これらのIDは、sourceHandleおよびtargetHandleオプションを持つエッジで使用できるため、特定のハンドルを接続できます。ID=1のノードとID=aのハンドルがある場合、ノードsource=1とsourceHandle=aを使用してこのハンドルを接続できます。

動的なハンドル

カスタムノードでハンドルの位置や数をプログラムで変更する場合は、useUpdateNodeInternals フックを使用してノードの内部を更新する必要があります。

複数のハンドルを持つカスタムノードの実装方法の例は、カスタムノードガイドまたはカスタムノードの例にあります。

カスタムハンドルのスタイル

ハンドルは div であるため、CSS を使用してスタイルを設定したり、スタイルプロップを渡して Handle をカスタマイズしたりできます。これは、エッジドロップ時にノードを追加およびシンプルなフローティングエッジの例で確認できます。

注意事項

何らかの理由でハンドルを非表示にする必要がある場合は、display: none の代わりに visibility: hidden または opacity: 0 を使用する必要があります。これは、React Flow が正常に動作するためにハンドルの寸法を計算する必要があるため重要であり、display: none を使用すると、幅と高さが 0 と報告されます。

コンポーネント型