Skip to Content
学习教程定制句柄

句柄

¥Handles

句柄是 React Flow 中 nodes 上的连接点。我们的内置节点包含一个源句柄和一个目标句柄，但你可以根据需要使用任意数量的不同句柄自定义节点。

¥Handles are the connection points on nodes in React Flow. Our built-in nodes include one source and one target handle, but you can customize your nodes with as many different handles as you need.

创建带有句柄的节点

¥Creating a node with handles

要创建带有句柄的 自定义节点，你可以使用 React Flow 提供的 <Handle /> 组件。此组件允许你为自定义节点定义源和目标句柄。以下是如何实现带有两个句柄的自定义节点的示例：

¥To create a custom node with handles, you can use the <Handle /> component provided by React Flow. This component allows you to define source and target handles for your custom nodes. Here’s an example of how to implement a custom node with two handles:

import { Handle } from '@xyflow/react';
 
export function CustomNode() {
  return (
    <div className="custom-node">
      <div>Custom Node Content</div>
      <Handle type="source" position="top" />
      <Handle type="target" position="bottom" />
    </div>
  );
}

使用多个句柄

¥Using multiple handles

如果你想在自定义节点中使用多个源或目标句柄，则需要为每个句柄指定一个唯一的 id。这使得 React Flow 在连接边时能够区分不同的句柄。

¥If you want to use multiple source or target handles in your custom node, you need to specify each handle with a unique id. This allows React Flow to differentiate between the handles when connecting edges.

  <Handle type="target" position="top" />
  <Handle type="source" position="right" id="a" />
  <Handle type="source" position="bottom" id="b" />

要将边连接到节点的特定句柄，请使用属性 sourceHandle（表示边的起点）和 targetHandle（表示边的终点）。通过使用适当的句柄 id 定义 sourceHandle 或 targetHandle，你可以指示 React Flow 将边附加到该特定句柄，确保在你想要的位置建立连接。

¥To connect an edge to a specific handle of a node, use the properties sourceHandle (for the edge’s starting point) and targetHandle (for the edge’s ending point). By defining sourceHandle or targetHandle with the appropriate handle id, you instruct React Flow to attach the edge to that specific handle, ensuring that connections are made where you intend.

const initialEdges = [
  { id: 'n1-n2', source: 'n1', sourceHandle: 'a', target: 'n2' },
  { id: 'n1-n3', source: 'n1', sourceHandle: 'b', target: 'n3' },
];

在这种情况下，两个句柄的源节点都是 n1，但句柄 id 不同。一个来自句柄 ID a，另一个来自 b。两个边也有不同的目标节点：

¥In this case, the source node is n1 for both handles but the handle ids are different. One comes from handle id a and the other one from b. Both edges also have different target nodes:

自定义句柄

¥Custom handles

你可以通过封装 <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 function TargetHandleWithValidation({ position, source }) {
  return (
    <Handle
      type="target"
      position={position}
      isValidConnection={(connection) => connection.source === source}
      onConnect={(params) => console.log('handle onConnect', params)}
      style={{ background: '#fff' }}
    />
  );
}

无类型句柄

¥Typeless handles

如果你想创建一个没有特定类型（源或目标）的句柄，你可以在 <ReactFlow /> 组件中将 connectionMode 设置为 Loose。这使得句柄可以用于传入和传出连接。

¥If you want to create a handle that does not have a specific type (source or target), you can set connectionMode to Loose in the <ReactFlow /> component. This allows the handle to be used for both incoming and outgoing connections.

动态句柄

¥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.

自定义句柄样式

¥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.

连接时句柄的样式

¥Styling 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.

隐藏句柄

¥Hiding handles

如果你出于某种原因需要隐藏句柄，则必须使用 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!

Last updated on
节点边缘