<ReactFlow />

GitHub 上的源代码

The <ReactFlow /> component is the heart of your React Flow application. It renders your nodes and edges, handles user interaction, and can manage its own state if used as an uncontrolled flow.

import { ReactFlow } from '@xyflow/react'
 
export default function Flow() {
  return <ReactFlow
    nodes={...}
    edges={...}
    onNodesChange={...}
    ...
  />
}

此组件接受许多不同的属性，其中大多数是可选的。我们已尝试按逻辑分组对其进行文档化，以帮助您找到想要的内容。

常用属性

这些是您在使用 React Flow 时最常使用的属性。如果您使用的是带自定义节点的受控流程，您可能会使用几乎所有这些属性！

名称	类型	默认值
#`nodes`	`Node[]` 要在受控流程中渲染的节点数组。	`[]`
#`edges`	`Edge[]` 要在受控流程中渲染的边数组。	`[]`
#`defaultNodes`	`Node[]` 要在不受控流程中渲染的初始节点。	`[]`
#`defaultEdges`	`Edge[]` 要在不受控流程中渲染的初始边。	`[]`
#`onNodesChange`	`(更改: NodeChange[]) => 空` 使用此事件处理程序为受控流程添加交互性。它在节点拖动、选择和移动时调用。
#`onEdgesChange`	`(更改: EdgeChange[]) => 空` 使用此事件处理程序为受控流程添加交互性。它在边选择和删除时调用。
#`onConnect`	`(连接: Connection) => 空` 当连接线完成并且两个节点被用户连接时，此事件将使用新的连接触发。您可以使用 addEdge 实用程序将连接转换为完整的边。
#`nodeTypes`	`记录<字符串, React.ComponentType<NodeProps>>` 如果您想在流程中使用自定义节点，您需要让 React Flow 知道它们。在渲染新节点时，React Flow 会在此对象中查找该节点的类型，并渲染相应的组件。	`{ input: InputNode, default: DefaultNode, output: OutputNode group: GroupNode }`
#`edgeTypes`	`记录<字符串, React.ComponentType<EdgeProps>>` 与节点类型一样，此属性允许您通过将边类型映射到 React 组件来在流程中使用自定义边。	`{ default: BezierEdge, straight: StraightEdge, step: StepEdge, smoothstep: SmoothStepEdge simplebezier: SimpleBezier }`
#`nodeOrigin`	`[数字, 数字]` 在流程中放置节点或查找其 x 和 y 位置时使用的节点原点。原点 [0,0] 表示节点的左上角将放置在 x 和 y 位置。	`[0,0]`
#`nodeDragThreshold`	`数字` 使用大于零的阈值可以延迟节点拖动事件。如果阈值为 1，则需要拖动节点 1 个像素才能触发拖动事件。1 是默认值，因此单击不会触发拖动事件。	`1`
#`nodeClickDistance`	`数字` 鼠标按下/抬起之间触发点击的最大距离。	`0`
#`paneClickDistance`	`数字` 鼠标按下/抬起之间触发点击的最大距离。	`0`
#`style`	`React.CSSProperties`
#`className`	`字符串`
#`proOptions`	`ProOptions` 我们的专业选项是为我们的专业订阅者设计的配置设置。任何人都可以免费使用它们！
#`colorMode`	`"系统" \| "浅色" \| "深色"` React Flow 有两个内置的颜色主题：浅色和深色。默认情况下，它会尝试采用用户的系统颜色主题。	`"system"`

视窗属性

名称	类型	默认值
#`defaultViewport`	`Viewport` 设置视窗的初始位置和缩放级别。如果提供了默认视窗，但启用 fitView，则默认视窗将被忽略。	`{ x: 0, y: 0, zoom: 1 }`
#`viewport`	`Viewport` 当你传递视窗属性时，它是受控的，你也需要传递 onViewportChange 来处理内部更改。	`{ x: 0, y: 0, zoom: 1 }`
#`onViewportChange`	`(视窗: Viewport) => 空` 在使用受控视窗时，用于更新用户视窗状态。
#`fitView`	`布尔值` 当为 true 时，流程将被缩放和平移以最初适合所有节点。	`false`
#`fitViewOptions`	`FitViewOptions` 当你通常在 ReactFlowInstance 上调用 fitView 时，你可以提供一个选项对象来定制其行为。这个属性让你对初始 fitView 调用做同样的事情。
#`minZoom`	`数字`	`0.5`
#`maxZoom`	`数字`	`2`
#`snapToGrid`	`布尔值` 启用后，节点在拖动时将捕捉到网格。	`false`
#`snapGrid`	`[数字, 数字]` 如果启用 snapToGrid，则此属性配置节点将捕捉到的网格。	`[25,25]`
#`onlyRenderVisibleElements`	`布尔值` 你可以启用此优化来指示 React Flow 仅渲染视窗中可见的节点和边。	`false`
#`translateExtent`	`CoordinateExtent` 默认情况下，视窗无限延伸。你可以使用此属性来设置边界。第一组坐标是左上角边界，第二组是右下角边界。	`[[-∞,-∞], [+∞,+∞]]`
#`nodeExtent`	`CoordinateExtent` 与 translateExtent 一样，此属性允许你设置一个边界来控制节点放置的位置。	`[[-∞,-∞], [+∞,+∞]]`
#`preventScrolling`	`布尔值` 禁用此属性将允许用户即使在他们的指针在流程之上时也能滚动页面。	`true`
#`attributionPosition`	`PanelPosition` 默认情况下，React Flow 将在流程的右下角渲染一个小的归属。你可以使用此属性来更改其位置，如果你想在那里放置其他东西。	`"bottom-right"`

边属性

名称	类型	默认值
#`elevateEdgesOnSelect`	`布尔值` 启用此选项将在选中时提高连接到节点的边的 z 索引。	`false`
#`defaultMarkerColor`	`字符串`	`"#b1b1b7"`
#`defaultEdgeOptions`	`DefaultEdgeOptions` 这里设置的任何默认值都将应用于添加到流程中的所有新边。如果新边上存在属性，则这些属性将覆盖这些默认值。
#`reconnectRadius`	`数字` 边连接周围可以触发边重新连接的半径。	`10`
#`edgesReconnectable`	`布尔值` 边是否可以创建后更新。当此属性为 true 且提供了 onReconnect 处理程序时，用户可以将现有边拖动到新的源或目标。单个边可以使用其可重新连接属性覆盖此值。	`true`

事件处理程序

⚠️

请务必在组件外部或使用 React 的 useCallback 钩子定义任何事件处理程序。如果你不这样做，这会导致 React Flow 进入无限重新渲染循环！

通用事件

名称	类型
#`onInit`	`(实例: ReactFlowInstance) => 空` onInit 回调在视窗初始化时被调用。此时，你可以使用实例来调用 fitView 或 zoomTo 等方法。
#`onError`	`(代码: 字符串, 消息: 字符串) => 空` 有时会发生一些导致 React Flow 出现错误的情况。我们不会让你的应用程序崩溃，而是将一条消息记录到控制台，然后调用此事件处理程序。你可以使用它进行额外的日志记录或向用户显示消息。
#`onDelete`	`({节点: Node[], 边: Edge[]}) => 空` 当节点或边被删除时，此处理程序被调用。
#`onBeforeDelete`	`({节点: Node[], 边: Edge[]}) => 承诺<布尔值 \| {节点: Node[], 边: Edge[]}>` 此处理程序在节点或边即将被删除之前被调用。删除可以通过返回 false 来中止，或者可以修改要删除的节点和边。

节点事件

名称	类型
#`onNodeClick`	`(事件: React.MouseEvent,节点: Node) => 空`
#`onNodeDoubleClick`	`(事件: React.MouseEvent,节点: Node) => 空`
#`onNodeDragStart`	`(事件: React.MouseEvent,节点: Node, 节点: Node[]) => 空`
#`onNodeDrag`	`(事件: React.MouseEvent,节点: Node, 节点: Node[]) => 空`
#`onNodeDragStop`	`(事件: React.MouseEvent,节点: Node, 节点: Node[]) => 空`
#`onNodeMouseEnter`	`(事件: React.MouseEvent,节点: Node) => 空`
#`onNodeMouseMove`	`(事件: React.MouseEvent,节点: Node) => 空`
#`onNodeMouseLeave`	`(事件: React.MouseEvent,节点: Node) => 空`
#`onNodeContextMenu`	`(事件: React.MouseEvent,节点: Node) => 空`
#`onNodesDelete`	`(节点: Node[]) => 空`
#`onNodesChange`	`OnNodesChange` 使用此事件处理程序为受控流程添加交互性。它在节点拖动、选择和移动时调用。

边事件

名称	类型
#`onEdgeClick`	`(事件: React.MouseEvent,边: Edge) => 空`
#`onEdgeDoubleClick`	`(事件: React.MouseEvent,边: Edge) => 空`
#`onEdgeMouseEnter`	`(事件: React.MouseEvent,边: Edge) => 空`
#`onEdgeMouseMove`	`(事件: React.MouseEvent,边: Edge) => 空`
#`onEdgeMouseLeave`	`(事件: React.MouseEvent,边: Edge) => 空`
#`onEdgeContextMenu`	`(事件: React.MouseEvent,边: Edge) => 空`
#`onReconnect`	`(旧边: Edge, 新连接: Connection) => 空` 当可重新连接边的源或目标从当前节点拖动时，此处理程序将被调用。即使边的源或目标最终没有改变，它也会触发。您可以使用 reconnectEdge 实用程序将连接转换为新边。
#`onReconnectStart`	`(事件: React.MouseEvent,边: Edge, 处理类型: "来源" \| "目标") => 空` 当用户开始拖动可编辑边的源或目标时，此事件触发。
#`onReconnectEnd`	`(事件: React.MouseEvent,边: Edge, 处理类型: "来源" \| "目标", 连接状态: 忽略<ConnectionState, '进行中'>) => 空` 当用户释放可编辑边的源或目标时，此事件触发。即使边更新没有发生，它也会被调用。您可以使用第四个 connectionState 参数在重新连接不成功时具有不同的行为。
#`onEdgesDelete`	`(边: Edge[]) => 空`
#`onEdgesChange`	`OnEdgesChange` 使用此事件处理程序为受控流程添加交互性。它在边选择和删除时调用。

连接事件

名称	类型
#`onConnect`	`(连接: Connection) => 空` 当连接线完成并且两个节点被用户连接时，此事件将使用新的连接触发。您可以使用 addEdge 实用程序将连接转换为完整的边。
#`onConnectStart`	`(事件: React.MouseEvent,参数: { 节点 ID: 字符串 \| 空; 处理 ID: 字符串 \| 空; 处理类型: "来源" \| "目标" \| 空; }) => 空`
#`onConnectEnd`	`(事件: React.MouseEvent,连接状态: 忽略<ConnectionState, '进行中'>) => 空` 无论是否可以建立有效连接，此回调都会触发。您可以使用第二个 connectionState 参数在连接不成功时具有不同的行为。
#`onClickConnectStart`	`(事件: React.MouseEvent,参数: { 节点 ID: 字符串 \| 空; 处理 ID: 字符串 \| 空; 处理类型: "来源" \| "目标" \| 空; }) => 空`
#`onClickConnectEnd`	`(事件: React.MouseEvent) =>空`
#`isValidConnection`	`(连接: Connection) => 布尔值` 此回调可用于验证新连接。如果您返回 false，则边将不会添加到您的流程中。如果您有自定义连接逻辑，建议出于性能原因使用此回调而不是 handle 组件上的 isValidConnection prop。

窗格事件

名称	类型
#`onMove`	`(事件: React.MouseEvent \|React.TouchEvent \| 空, 数据: Viewport) => 空` 当用户平移或缩放视窗时，此事件处理程序将被调用。
#`onMoveStart`	`(事件: React.MouseEvent \|React.TouchEvent \| 空, 数据: Viewport) => 空` 当用户开始平移或缩放视窗时，此事件处理程序将被调用。
#`onMoveEnd`	`(事件: React.MouseEvent \|React.TouchEvent \| 空, 数据: Viewport) => 空` 当用户停止平移或缩放视窗时，此事件处理程序将被调用。
#`onPaneClick`	`(事件: React.MouseEvent) =>空`
#`onPaneContextMenu`	`(事件: React.MouseEvent) =>空`
#`onPaneScroll`	`(事件: React.MouseEvent) =>空`
#`onPaneMouseMove`	`(事件: React.MouseEvent) =>空`
#`onPaneMouseEnter`	`(事件: React.MouseEvent) =>空`
#`onPaneMouseLeave`	`(事件: React.MouseEvent) =>空`

选择事件

名称	类型
#`onSelectionChange`	`(参数: { 节点: Node[]; 边: Edge[]; }) => 空`
#`onSelectionDragStart`	`(事件: React.MouseEvent,节点: Node[]) => 空`
#`onSelectionDrag`	`(事件: React.MouseEvent,节点: Node[]) => 空`
#`onSelectionDragStop`	`(事件: React.MouseEvent,节点: Node[]) => 空`
#`onSelectionStart`	`() => 空`
#`onSelectionEnd`	`() => 空`
#`onSelectionContextMenu`	`(事件: React.MouseEvent,节点: Node[]) => 空` 当用户右键单击节点选择时，此事件处理程序将被调用。

交互属性

名称	类型	默认值
#`nodesDraggable`	`布尔值` 控制所有节点是否都可拖动。各个节点可以通过设置其 draggable 属性来覆盖此设置。如果您想在不可拖动的节点上使用鼠标处理程序，则需要向这些节点添加 "nopan" 类。	`true`
#`nodesConnectable`	`布尔值` 控制所有节点是否可连接。可以通过设置单个节点的 connectable 属性来覆盖此设置。	`true`
#`nodesFocusable`	`布尔值` 当为 true 时，可以使用 Tab 键在节点之间循环焦点，并使用 Enter 键选择。可以通过设置单个节点的 focusable 属性来覆盖此选项。	`true`
#`edgesFocusable`	`布尔值` 当为 true 时，可以使用 Tab 键在边之间循环焦点，并使用 Enter 键选择。可以通过设置单个边的 focusable 属性来覆盖此选项。	`true`
#`elementsSelectable`	`布尔值` 当为 true 时，可以通过单击元素（节点和边）来选择它们。可以通过设置单个元素的 selectable 属性来覆盖此选项。	`true`
#`autoPanOnConnect`	`布尔值` 当为 true 时，在创建连接时，如果光标移动到视窗边缘，则视窗会自动平移。	`true`
#`autoPanOnNodeDrag`	`布尔值` 当为 true 时，在拖动节点时，如果光标移动到视窗边缘，则视窗会自动平移。	`true`
#`autoPanSpeed`	`数字` 视窗在 autoPanOnNodeDrag 和 autoPanOnConnect 时平移的速度。	`20`
#`panOnDrag`	`布尔值 \| (0 \| 1 \| 2 \| 3 \| 4)[]` 启用此属性允许用户通过单击并拖动来平移视窗。还可以将此属性设置为数字数组，以限制可以激活平移的鼠标按钮。例如，[0,2] 将允许使用鼠标左键和右键进行平移。	`true`
#`selectionOnDrag`	`布尔值`	`false`
#`selectionMode`	`"部分" \| "完全"` 当设置为“部分”时，当用户通过单击并拖动创建选择框时，即使只有部分在框中的节点也会被选中。	`"full"`
#`panOnScroll`	`布尔值`	`false`
#`panOnScrollSpeed`	`数字`
#`panOnScrollMode`	`PanOnScrollMode` 此属性用于限制启用 panOnScroll 时平移的方向。 “free”选项允许在任何方向进行平移。	`PanOnScrollMode.Free`
#`zoomOnScroll`	`布尔值`	`true`
#`zoomOnPinch`	`布尔值`	`true`
#`zoomOnDoubleClick`	`布尔值`	`true`
#`selectNodesOnDrag`	`布尔值`	`true`
#`elevateNodesOnSelect`	`布尔值` 启用此选项将在选择节点时提高其 z 索引。	`true`
#`connectOnClick`	`布尔值` connectOnClick 选项允许您单击或轻触源句柄以开始连接，然后单击目标句柄以完成连接。如果您将此选项设置为 false，用户需要将连接线拖动到目标句柄才能创建连接。	`true`
#`connectionMode`	`"松散" \| "严格"` 松散连接模式允许您将任何类型的句柄连接到彼此。严格模式只允许您将源句柄连接到目标句柄。	`"strict"`

连接线属性

名称	类型	默认值
#`connectionRadius`	`数字` 在句柄周围的半径，您可以在其中放下连接线以创建新的边。	`20`
#`connectionLineType`	`ConnectionLineType` 用于连接线的边路径的类型。虽然创建的边可以是任何类型，但 React Flow 需要知道在创建边之前要渲染哪种类型的路径用于连接线！	`ConnectionLineType.Bezier`
#`connectionLineStyle`	`React.CSSProperties`
#`connectionLineComponent`	`React.ComponentType<ConnectionLineComponentProps>`
#`connectionLineWrapperStyles`	`React.CSSProperties`

键盘属性

React Flow 允许您传入一些不同的键盘快捷键，作为与流程进行交互的另一种方式。我们尝试设置合理的默认值，例如使用退格键删除任何选定的节点或边，但您可以使用这些属性来设置您自己的快捷键。

要禁用任何这些快捷键，请将 null 传递给您要禁用的属性。

名称	类型	默认值
#`deleteKeyCode`	`字符串 \| 字符串[] \| 空` 如果设置，按下该键或组合键将删除任何选定的节点和边。传递数组表示可以按下的多个键。例如，["Delete", "Backspace"] 将在按下任一键时删除选定的元素。	`"Backspace"`
#`selectionKeyCode`	`字符串 \| 字符串[] \| 空` 如果设置，按住此键将允许您单击并拖动以在多个节点和边周围绘制选择框。传递数组表示可以按下的多个键。例如，["Shift", "Meta"] 允许您在按下任一键时绘制选择框。	`"Shift"`
#`multiSelectionKeyCode`	`字符串 \| 字符串[] \| 空`	`"Meta" for MacOs, "Control" for other systems`
#`zoomActivationKeyCode`	`字符串 \| 字符串[] \| 空` 如果设置了键，即使 panOnScroll 设置为 false，您也可以在按住该键时缩放视窗。通过将此属性设置为 null，您可以禁用此功能。	`"Meta" for MacOs, "Control" for other systems`
#`panActivationKeyCode`	`字符串 \| 字符串[] \| 空` 如果设置了键，即使 panOnScroll 设置为 false，您也可以在按住该键时平移视窗。通过将此属性设置为 null，您可以禁用此功能。	`"Space"`
#`disableKeyboardA11y`	`布尔值` 您可以使用此属性禁用键盘辅助功能，例如使用箭头键选择节点或移动选定的节点。	`false`

样式属性

在画布中渲染的元素上应用某些类将改变交互的处理方式。如果您需要，这些属性允许您配置这些类名。

名称	类型	默认值
#`noPanClassName`	`字符串` 如果画布中的元素不阻止鼠标事件传播，单击并拖动该元素将平移视窗。添加 "nopan" 类可以阻止这种行为，这个属性允许您更改该类的名称。	`"nopan"`
#`noDragClassName`	`字符串` 如果节点是可拖动的，单击并拖动该节点将使它在画布上移动。添加 "nodrag" 类可以阻止这种行为，这个属性允许您更改该类的名称。	`"nodrag"`
#`noWheelClassName`	`字符串` 通常，当鼠标悬停在画布上时滚动鼠标滚轮将缩放视窗。向画布中的元素添加 "nowheel" 类将阻止这种行为，这个属性允许您更改该类的名称。	`"nowheel"`

说明

此组件的属性被导出为 ReactFlowProps

API 参考 <ReactFlowProvider />