Skip to Content
🚨 New Example: Handling Node Collisions!
学习教程定制句柄

句柄

¥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 { 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（表示边的终点）。通过使用适当的句柄 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:

默认情况下，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 /> 组件封装你的自定义组件。

    ¥Wrap your custom component with <Handle /> component.

  2. 通过将 border 和 background 设置为 none 来隐藏内置的 <Handle /> 外观。

    ¥Hide the built-in <Handle /> appearance by setting border and background to none.

  3. 将 <Handle /> 的 width 和 height 设置为与你的自定义组件匹配。

    ¥Set the widthand height of <Handle /> to match your custom component.

  4. 使用 pointer-events: none 设置子组件的样式。

    ¥Style the child component with pointer-events: none.

  5. 然后，如有必要，使用 CSS 定位属性（例如 top, left）重新定位子自定义组件，使其完美地位于 <Handle /> 组件内。

    ¥Then, reposition the child custom component using CSS position properties like top, left if necessary to position it perfectly inside the <Handle /> component.

此示例展示了如何使用 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 来设置它的样式或传递样式属性来自定义句柄。你可以在 在边缘拖放时添加节点 和 简单浮动边缘 示例中看到这一点。

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