<Handle />

GitHub 上的源代码 

¥Source on GitHub 

<Handle /> 组件用于你的 自定义节点 中定义连接点。

¥The <Handle /> component is used in your custom nodes to define connection points.

import { Handle, Position } from '@xyflow/react';
 
export const 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。

¥For TypeScript users, the props type for the <Handle /> component is exported as HandleProps.

示例

¥Examples

带验证的自定义句柄

¥Custom handle with validation

你可以通过封装 <Handle /> 组件来创建自己的自定义句柄。此示例显示了一个自定义句柄，该句柄仅在连接源与给定的 ID 匹配时才允许连接。

¥You can create your own custom handles by wrapping the <Handle /> component. This example shows a custom handle that only allows connections when the connection source matches a given 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' }}
  />
);

连接时的样式处理

¥Style handles when connecting

当连接线位于句柄上方时，句柄会接收附加类名 connecting，如果连接有效，则接收 valid。你可以找到使用这些类 此处 的示例。

¥The handle receives the additional class names connecting when the connection line is above the handle and valid if the connection is valid. You can find an example which uses these classes here.

多个句柄

¥Multiple handles

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

¥If you need multiple source or target handles you can achieve this by creating a custom node. Normally you just use the id of a node for the source or target of an edge. If you have multiple source or target handles you need to pass an id to these handles. These ids can be used by an edge with the sourceHandle and targetHandle options, so that you can connect a specific handle. If you have a node with an id = 1 and a handle with an id = a you can connect this handle by using the node source=1 and the sourceHandle=a.

动态句柄

¥Dynamic handles

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

¥If you are programmatically changing the position or number of handles in your custom node, you need to update the node internals with the useUpdateNodeInternals hook.

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

¥You can find an example of how to implement a custom node with multiple handles in the custom node guide or in the custom node example.

自定义句柄样式

¥Custom handle styles

由于句柄是一个 div，因此你可以使用 CSS 来设置它的样式或传递样式属性来自定义句柄。你可以在 在边缘拖放时添加节点 和 简单浮动边缘 示例中看到这一点。

¥Since the handle is a div, you can use CSS to style it or pass a style prop to customize a Handle. You can see this in the Add Node On Edge Drop and Simple Floating Edges examples.

注释

¥Notes

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

  ¥If you need to hide a handle for some reason, you must use visibility: hidden or opacity: 0 instead of display: none. This is important because React Flow needs to calculate the dimensions of the handle to work properly and using display: none will report a width and height of 0!