术语和定义

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

节点 Nodes

React Flow 中的节点是一个 React 组件。这意味着它可以渲染您喜欢的任何内容。每个节点都有一个 x 和 y 坐标，这告诉它它在视口中的位置。默认情况下，节点如上例所示。您可以在节点选项文档中找到用于自定义节点的所有选项。

自定义节点

这就是 React Flow 的神奇之处。您可以自定义节点的外观和行为，如您所愿。您可能创建的许多功能并非内置于 React Flow 中。您可以使用自定义节点执行以下操作：

• 渲染表单元素
• 可视化数据
• 支持多个手柄

请参阅自定义节点文档以获取更多信息。

句柄 Handles

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

边 Edges

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

自定义边

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

• 添加一个按钮以删除边缘
• 自定义路由行为
• 仅使用一个 SVG 路径无法解决复杂的样式或交互

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

连接线

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

视口

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