术语和定义
¥Terms and Definitions
React Flow 的基本构建块包括节点、边、句柄、连接线和视口。让我们更详细地研究一下这些核心元素。
¥The fundamental building blocks of React Flow include nodes, edges, handles, a connection line and the viewport. Let’s examine each of these core elements in more detail.
节点
¥Nodes
React Flow 开箱即用,带有一些默认节点类型,但自定义才是 React Flow 真正魅力所在。你可以设计节点,使其按照你需要的方式工作 - 无论是嵌入交互式表单元素、显示动态数据可视化,还是合并多个连接句柄。React Flow 奠定了基础,剩下的交给你的想象力。
¥React Flow comes out of the box with a few default node types, but customization is where the magic of React Flow truly happens. You can design your nodes to work exactly the way you need them to—whether that’s embedding interactive form elements, displaying dynamic data visualizations, or even incorporating multiple connection handles. React Flow lays the foundation, and your imagination does the rest.
我们提供了创建你自己的 自定义节点 的指南。你可以在 节点选项 文档中找到自定义节点的所有选项。
¥We have a guide on creating your own Custom Nodes. You can find all the options for customizing your nodes in the Node Options documentation.
句柄
¥Handles
句柄(在其他库中也称为“端口”)是边连接到节点的连接点。默认情况下,它们在节点的顶部、底部、左侧或右侧显示为灰色圆圈。但是,它们只是 div 元素,你可以按照自己喜欢的方式定位和设置样式。创建自定义节点时,你可以根据需要添加任意数量的句柄。更多信息,请参阅 Handle 文档。
¥A handle (also known as a “port” in other libraries) is the attachment point where an edge connects to a node. By default, they appear as grey circles on the top, bottom, left, or right sides of a node. But, they are just div elements, and can be positioned and styled any way you’d like. When creating a custom node, you can include as many handles as needed. For more information, refer to the Handle documentation.
边缘
¥Edges
边连接节点。每个边都需要一个目标和一个源节点。React Flow 带有四个内置 边缘类型:默认(贝塞尔曲线)、平滑步进、步进和直线。边是 SVG 路径,可以使用 CSS 设置样式,并且完全可自定义。如果你使用的是多个句柄,则可以单独引用它们以创建节点的多个连接。
¥Edges connect nodes. Every edge needs a target and a source node. React Flow comes with four built-in edge 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.
与自定义节点一样,你也可以自定义边。人们使用自定义边可以做的事情包括:
¥Like custom nodes, you can also customize edges. Things that people do with custom edges include:
-
添加按钮以移除边
¥Adding buttons to remove edges
-
自定义路由行为
¥Custom routing behavior
-
复杂的样式或交互无法仅通过一个 SVG 路径解决
¥Complex styling or interactions that cannot be solved with just one SVG path
更多信息,请参阅 自定义边参考 页面。
¥For more information, refer to the Custom Edges Reference page.
连接线
¥Connection Line
React Flow 内置功能,允许你通过点击并拖动一个句柄到另一个句柄来创建新的边。拖动时,占位符边被称为连接线。连接线也内置了四种类型,并且可以自定义。你可以在 属性部分 中找到用于配置连接线的 props。
¥React Flow has built-in functionality that allows you to click and drag from one handle to another to create a new edge. While dragging, the placeholder edge is referred to as 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 和缩放值。当你拖动窗格时,会更改 x 和 y 坐标。当你放大或缩小时,会改变缩放级别。
¥All of React Flow is contained within the viewport. Each node has an x- and y-coordinate, which indicates its position within the viewport. The viewport has x, y, and zoom values. When you drag the pane, you change the x and y coordinates. When you zoom in or out, you alter the zoom level.