Skip to Content
教程定制句柄

句柄

🌐 Handles

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

🌐 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 { Position, Handle } from '@xyflow/react';
 
export function CustomNode() {
  return (
    <div className="custom-node">
      <div>Custom Node Content</div>
      <Handle type="source" position={Position.Top} />
      <Handle type="target" position={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={Position.Top} />
  <Handle type="source" position={Position.Right} id="a" />
  <Handle type="source" position={Position.Bottom} id="b" />

要将边连接到节点的特定句柄，请使用属性 sourceHandle（用于边的起点）和 targetHandle（用于边的终点）。通过为 sourceHandle 或 targetHandle 定义适当的句柄 id，你可以指示 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:

默认情况下，React Flow 会将一个句柄放置在指定侧的中心。如果你想在一侧显示多个句柄，可以通过内联样式调整位置，或重写默认的 CSS，自行定位。

🌐 By default React Flow positions a handle in the center of the specified side. If you want to display multiple handles on a side, you can adjust the position via inline styles or overwrite the default CSS and position it on your own.

自定义句柄

🌐 Custom handles

你可以通过用<Handle />组件封装任何自定义组件，将其用作句柄。按照以下步骤集成你的自定义组件：

🌐 You can use any custom component as a Handle by wrapping it with the <Handle /> component. Follow these steps to integrate your custom component:

  1. 用 <Handle /> 组件封装你的自定义组件。
  2. 通过将 border 和 background 设置为 none 来隐藏内置的 <Handle /> 外观。
  3. 将<Handle />的width和height设置为与你的自定义组件匹配。
  4. 使用 pointer-events: none 为子组件设置样式。
  5. 然后，如果有必要，可以使用 CSS 的 position 属性（如 top, left）重新定位子自定义组件，以使其完美地位于 <Handle /> 组件内部。

此示例显示了一个作为句柄使用的 Material UI 图标 ArrowCircleRightIcon。

🌐 This example shows a Material UI icon ArrowCircleRightIcon used as a Handle.

import { Handle, Position } from '@xyflow/react';
import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
 
export function CustomNode() {
  return (
    <div className="react-flow__node-default">
      <Handle
        position={Position.Right}
        type="source"
        style={{
          background: 'none',
          border: 'none',
          width: '1em',
          height: '1em',
        }}
      >
        <ArrowCircleRightIcon
          style={{
            pointerEvents: 'none',
            fontSize: '1em',
            left: 0,
            position: 'absolute',
          }}
        />
      </Handle>
      Custom Node
    </div>
  );
}

无类型句柄

🌐 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 来为其设置样式，或者传递 style 属性来自定义句柄。你可以在 拖放边上添加节点 和 简单浮动边 示例中看到这一点。

🌐 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
节点边缘