术语和定义

¥Terms and Definitions

在本部分文档中，我们解释了一些基本的 React Flow 术语和定义。你将在 React Flow 中大量使用的三个东西是节点、边和句柄。

¥In this part of the docs, we explain some basic React Flow terms and definitions. Three things you’ll be using a lot in React Flow are nodes, edges, and handles.

节点

¥Nodes

React Flow 中的节点是 React 组件。这意味着它可以渲染任何你喜欢的东西。每个节点都有一个 x 和 y 坐标，告诉它在图中的位置视口。默认情况下，节点看起来像上面的示例。你可以在 节点选项 文档中找到自定义节点的所有选项。

¥A node in React Flow is a React component. That means it can render anything you like. Each node has an x- and y-coordinate, which tells it where it is placed in the viewport. By default, a node looks like in the example above. You can find all the options for customizing your nodes in the Node options documentation.

自定义节点

¥Custom Nodes

这就是 React Flow 的魔力所在。你可以根据自己的喜好自定义节点的外观和行为。你可能创建的许多功能都不是 React Flow 内置的。你可能对自定义节点执行的一些操作包括：

¥This is where the magic of React Flow happens. You can customize nodes to look and act however you would like. Much of the functionality you might create is not built-in to React Flow. Some of the things you might do with a custom node are:

• 渲染表单元素

  ¥Render form elements

• 可视化数据

  ¥Visualize data

• 支持多个句柄

  ¥Support multiple handles

有关更多信息，请参阅 自定义节点文档。

¥Please refer to the custom node docs for further information.

句柄

¥Handles

句柄（在其他库中也称为“端口”）是边缘连接到节点的地方。句柄可以放在任何地方，并可以根据你的喜好设置样式。它只是一个 div 元素。默认情况下，它显示为节点顶部、底部、左侧或右侧的灰色圆圈。创建自定义节点时，你可以在节点中拥有任意数量的句柄。更多信息可以在 处理文档 中找到。

¥A handle (also called “port” in other libraries) is the place where an edge attaches to a node. The handle can be placed anywhere, and styled as you like. It’s just a div element. By default, it appears as a grey circle on the top, bottom, left, or right of the node. When creating a custom node, you can have as many handles as you need in your node. More information can be found in the handle docs.

边缘

¥Edges

边连接两个节点。每个边都需要一个目标和一个源节点。React Flow 带有四个内置 边缘类型：默认（贝塞尔曲线）、平滑步进、步进和直线。边是 SVG 路径，可以使用 CSS 设置样式，并且完全可自定义。如果你使用的是多个句柄，则可以单独引用它们以创建节点的多个连接。

¥An edge connects two nodes. Every edge needs a target and a source node. React Flow comes with four built-in edges types: default (bezier), smoothstep, step and straight. An edge is SVG path that can be styled with CSS and is completely customizable. If you are using multiple handles, you can reference them individually to create multiple connections for a node.

自定义边

¥Custom Edges

与自定义节点一样，你也可以自定义边。人们使用自定义边缘做的事情是：

¥Like custom nodes, you can also customize edges. Things that people do with custom edges are:

• 添加一个按钮来删除一条边

  ¥Add a button to remove an edge

• 自定义路由行为

  ¥Custom routing behavior

• 复杂的样式或交互无法仅通过一个 SVG 路径解决

  ¥Complex styling or interactions that cannot be solved with just one SVG path

你可以在 自定义边缘 api 网站上找到更多信息。

¥You can find more information on the custom edges api site.

连接线

¥Connection Line

React Flow 具有内置功能，可以通过单击并拖动从一个句柄到另一个句柄来创建新边。拖动时，占位符边称为连接线。连接线还内置了四种类型，并且可以自定义。你可以在 属性部分 中找到用于配置连接线的 props。

¥React Flow has built-in functionality to click-and-drag from one handle to another in order to create a new edge. While dragging, the placeholder edge is called a connection line. The connection line also comes with four types built-in and is customizable. You can find the props for configuring the connection line in the props section.

Viewport

所有 React Flow 都存在于视口内。视口具有 x、y 和缩放值。当你拖动窗格时，你会更改 x 和 y 坐标，当你放大或缩小时，你会改变缩放级别。

¥All of React Flow exists inside of the viewport. The viewport has x, y and zoom values. When you drag the pane, you change the x and y coordinates and when you zoom in or out you alter the zoom level.