<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 /> 组件的属性类型导出为 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 与给定 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。你可以找到一个使用这些类的示例这里。

多个手柄

如果你需要多个源手柄或目标手柄，可以通过创建自定义节点来实现。通常，你只需要使用节点的 ID 作为边的 source 或 target。如果你有多个源手柄或目标手柄，则需要向这些手柄传递一个 ID。这些 ID 可以由具有 sourceHandle 和 targetHandle 选项的边使用，以便你可以连接特定手柄。如果你有一个 ID 为 1 的节点和一个 ID 为 a 的手柄，你可以使用节点 source=1 和 sourceHandle=a 来连接此手柄。

动态手柄

如果你在自定义节点中以编程方式更改手柄的位置或数量，则需要使用useUpdateNodeInternals 钩子更新节点内部。

您可以在自定义节点指南或自定义节点示例中找到如何实现具有多个句柄的自定义节点的示例。

自定义句柄样式

由于句柄是一个 div，您可以使用 CSS 对其进行样式化或传递一个样式 prop 来自定义 Handle。您可以在添加节点到边缘拖放和简单浮动边示例中看到这一点。

注意

如果您需要出于某种原因隐藏句柄，则必须使用 visibility: hidden 或 opacity: 0 而不是 display: none。这很重要，因为 React Flow 需要计算句柄的尺寸才能正常工作，使用 display: none 会报告宽度和高度为 0！

组件类型