<ReactFlow />

<ReactFlow /> 元件是您 React 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[]) => void` 使用此事件處理常式為受控流程新增互動功能。它會在節點拖曳、選取和移動時呼叫。
#`onEdgesChange`	`(變更: EdgeChange[]) => void` 使用此事件處理常式為受控流程新增互動功能。它會在邊緣選取和移除時呼叫。
#`onConnect`	`(連線: Connection) => void` 當連線線條完成且使用者連接兩個節點時，此事件會觸發並帶有新的連線。您可以使用 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`	`數字` mousedown/up 之間會觸發點擊的最大距離。	`0`
#`paneClickDistance`	`數字` mousedown/up 之間會觸發點擊的最大距離。	`0`
#`style`	`React.CSSProperties`
#`className`	`字串`
#`proOptions`	`ProOptions` 我們的專業版選項是為我們的專業訂閱者提供的配置設定。雖然任何人都可以自由使用它們！
#`colorMode`	`"系統" \| "淺色" \| "深色"` React Flow 有 2 個內建的顏色主題：淺色和深色。預設情況下，它會嘗試採用使用者系統的顏色主題。	`"system"`

視窗屬性

名稱	類型	預設值
#`defaultViewport`	`Viewport` 設定視窗的初始位置和縮放。如果提供了預設視窗但啟用了 fitView，則會忽略預設視窗。	`{ x: 0, y: 0, zoom: 1 }`
#`viewport`	`Viewport` 當您傳遞視窗屬性時，它是受控制的，您還需要傳遞 onViewportChange 來處理內部變更。	`{ x: 0, y: 0, zoom: 1 }`
#`onViewportChange`	`(視窗: Viewport) => void` 用於處理受控視窗時，更新使用者視窗狀態。
#`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-index。	`false`
#`defaultMarkerColor`	`字串`	`"#b1b1b7"`
#`defaultEdgeOptions`	`DefaultEdgeOptions` 在此處設定的任何預設值都將套用至新增到流程的所有新邊緣。如果新邊緣上存在屬性，則會覆寫這些預設值。
#`reconnectRadius`	`數字` 邊緣連接周圍可以觸發邊緣重新連接的半徑。	`10`
#`edgesReconnectable`	`布林值` 是否可以在建立邊緣後更新它們。當此屬性為 true 並且提供了 onReconnect 處理常式時，使用者可以將現有邊緣拖曳到新的來源或目標。個別邊緣可以使用其 reconnectable 屬性來覆寫此值。	`true`

事件處理常式

⚠️

請務必記得在元件外部或使用 React 的 useCallback hook 定義任何事件處理常式。如果您不這樣做，可能會導致 React Flow 進入無限重新渲染循環！

一般事件

名稱	類型
#`onInit`	`(實例: ReactFlowInstance) => void` 當視窗初始化時，會呼叫 onInit 回呼。此時，您可以使用該實例呼叫 fitView 或 zoomTo 等方法。
#`onError`	`(程式碼: 字串, 訊息: 字串) => void` 有時可能會發生某些原因導致 React Flow 出錯。我們不會讓您的應用程式崩潰，而是會在主控台中記錄訊息，然後呼叫此事件處理常式。您可以使用它進行其他記錄或向使用者顯示訊息。
#`onDelete`	`({節點: Node[], 邊緣: Edge[]}) => void` 當刪除節點或邊緣時，會呼叫此處理常式。
#`onBeforeDelete`	`({節點: Node[], 邊緣: Edge[]}) => Promise<布林值 \| {節點: Node[], 邊緣: Edge[]}>` 此處理常式會在即將刪除節點或邊緣之前呼叫。可以透過傳回 false 來中止刪除，或者可以修改要刪除的節點和邊緣。

節點事件

名稱	類型
#`onNodeClick`	`(事件: React.MouseEvent,節點: Node) => void`
#`onNodeDoubleClick`	`(事件: React.MouseEvent,節點: Node) => void`
#`onNodeDragStart`	`(事件: React.MouseEvent,節點: Node, 節點: Node[]) => void`
#`onNodeDrag`	`(事件: React.MouseEvent,節點: Node, 節點: Node[]) => void`
#`onNodeDragStop`	`(事件: React.MouseEvent,節點: Node, 節點: Node[]) => void`
#`onNodeMouseEnter`	`(事件: React.MouseEvent,節點: Node) => void`
#`onNodeMouseMove`	`(事件: React.MouseEvent,節點: Node) => void`
#`onNodeMouseLeave`	`(事件: React.MouseEvent,節點: Node) => void`
#`onNodeContextMenu`	`(事件: React.MouseEvent,節點: Node) => void`
#`onNodesDelete`	`(節點: Node[]) => void`
#`onNodesChange`	`OnNodesChange` 使用此事件處理常式為受控流程新增互動功能。它會在節點拖曳、選取和移動時呼叫。

邊緣事件

名稱	類型
#`onEdgeClick`	`(事件: React.MouseEvent,邊緣: Edge) => void`
#`onEdgeDoubleClick`	`(事件: React.MouseEvent,邊緣: Edge) => void`
#`onEdgeMouseEnter`	`(事件: React.MouseEvent,邊緣: Edge) => void`
#`onEdgeMouseMove`	`(事件: React.MouseEvent,邊緣: Edge) => void`
#`onEdgeMouseLeave`	`(事件: React.MouseEvent,邊緣: Edge) => void`
#`onEdgeContextMenu`	`(事件: React.MouseEvent,邊緣: Edge) => void`
#`onReconnect`	`(oldEdge: Edge, newConnection: Connection) => void` 當可重新連接的邊緣的來源或目標從目前的節點拖曳時，會呼叫此處理函式。即使邊緣的來源或目標最終沒有變更，它也會觸發。您可以使用 `reconnectEdge` 工具程式將連線轉換為新的邊緣。
#`onReconnectStart`	`(事件: React.MouseEvent,邊緣: Edge, handleType: "來源" \| "目標") => void` 當使用者開始拖曳可編輯邊緣的來源或目標時，會觸發此事件。
#`onReconnectEnd`	`(事件: React.MouseEvent,邊緣: Edge, handleType: "來源" \| "目標", connectionState: Omit<ConnectionState, 'inProgress'>) => void` 當使用者釋放可編輯邊緣的來源或目標時，會觸發此事件。即使未發生邊緣更新，也會呼叫此事件。您可以使用第四個 `connectionState` 參數，在重新連線不成功時採用不同的行為。
#`onEdgesDelete`	`(邊緣: Edge[]) => void`
#`onEdgesChange`	`OnEdgesChange` 使用此事件處理常式為受控流程新增互動功能。它會在邊緣選取和移除時呼叫。

連線事件

名稱	類型
#`onConnect`	`(連線: Connection) => void` 當連線線條完成且使用者連接兩個節點時，此事件會觸發並帶有新的連線。您可以使用 addEdge 公用程式將連線轉換為完整的邊緣。
#`onConnectStart`	`(事件: React.MouseEvent,params: { nodeId: 字串 \| null; handleId: 字串 \| null; handleType: "來源" \| "目標" \| null; }) => void`
#`onConnectEnd`	`(事件: React.MouseEvent,connectionState: Omit<ConnectionState, 'inProgress'>) => void` 無論是否可以建立有效的連線，都會觸發此回呼。您可以使用第二個 `connectionState` 參數，在連線不成功時採用不同的行為。
#`onClickConnectStart`	`(事件: React.MouseEvent,params: { nodeId: 字串 \| null; handleId: 字串 \| null; handleType: "來源" \| "目標" \| null; }) => void`
#`onClickConnectEnd`	`(事件: React.MouseEvent) =>void`
#`isValidConnection`	`(連線: Connection) => 布林值` 此回呼可用於驗證新的連線。如果您傳回 `false`，則不會將邊緣新增至您的流程。如果您有自訂的連線邏輯，則為了效能考量，最好使用此回呼，而不是控制元件上的 `isValidConnection` 屬性。

窗格事件

名稱	類型
#`onMove`	`(事件: React.MouseEvent \|React.TouchEvent \| null, data: Viewport) => void` 當使用者平移或縮放視窗時，會呼叫此事件處理函式。
#`onMoveStart`	`(事件: React.MouseEvent \|React.TouchEvent \| null, data: Viewport) => void` 當使用者開始平移或縮放視窗時，會呼叫此事件處理函式。
#`onMoveEnd`	`(事件: React.MouseEvent \|React.TouchEvent \| null, data: Viewport) => void` 當使用者停止平移或縮放視窗時，會呼叫此事件處理函式。
#`onPaneClick`	`(事件: React.MouseEvent) =>void`
#`onPaneContextMenu`	`(事件: React.MouseEvent) =>void`
#`onPaneScroll`	`(事件: React.MouseEvent) =>void`
#`onPaneMouseMove`	`(事件: React.MouseEvent) =>void`
#`onPaneMouseEnter`	`(事件: React.MouseEvent) =>void`
#`onPaneMouseLeave`	`(事件: React.MouseEvent) =>void`

選取事件

名稱	類型
#`onSelectionChange`	`(params: { 節點: Node[]; 邊緣: Edge[]; }) => void`
#`onSelectionDragStart`	`(事件: React.MouseEvent,節點: Node[]) => void`
#`onSelectionDrag`	`(事件: React.MouseEvent,節點: Node[]) => void`
#`onSelectionDragStop`	`(事件: React.MouseEvent,節點: Node[]) => void`
#`onSelectionStart`	`() => void`
#`onSelectionEnd`	`() => void`
#`onSelectionContextMenu`	`(事件: React.MouseEvent,節點: Node[]) => void` 當使用者在節點選取項目上按下滑鼠右鍵時，會呼叫此事件處理函式。

互動屬性

名稱	類型	預設值
#`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`	`"partial" \| "full"` 當設定為「partial」時，當使用者透過點擊和拖曳建立選取框時，即使只有部分節點在框中，仍會選取這些節點。	`"full"`
#`panOnScroll`	`布林值`	`false`
#`panOnScrollSpeed`	`數字`
#`panOnScrollMode`	`PanOnScrollMode` 此屬性用於限制啟用 panOnScroll 時的平移方向。「free」選項允許在任何方向平移。	`PanOnScrollMode.Free`
#`zoomOnScroll`	`布林值`	`true`
#`zoomOnPinch`	`布林值`	`true`
#`zoomOnDoubleClick`	`布林值`	`true`
#`selectNodesOnDrag`	`布林值`	`true`
#`elevateNodesOnSelect`	`布林值` 啟用此選項將會在選取節點時提高其 z-index。	`true`
#`connectOnClick`	`布林值` connectOnClick 選項可讓您點擊或輕觸來源控制點以開始連線，然後點擊目標控制點以完成連線。如果您將此選項設定為 false，使用者將需要將連線線拖曳到目標控制點以建立連線。	`true`
#`connectionMode`	`"loose" \| "strict"` 寬鬆的連線模式允許您將任何類型的控制點相互連接。嚴格模式僅允許您將來源控制點連接到目標控制點。	`"strict"`

連線線屬性

名稱	類型	預設值
#`connectionRadius`	`數字` 在控制點周圍，您可以在此半徑內放下連線線以建立新的邊緣。	`20`
#`connectionLineType`	`ConnectionLineType` 用於連線線的邊緣路徑類型。雖然建立的邊緣可以是任何類型，但 React Flow 需要知道在建立邊緣之前，要為連線線呈現哪種類型的路徑！	`ConnectionLineType.Bezier`
#`connectionLineStyle`	`React.CSSProperties`
#`connectionLineComponent`	`React.ComponentType<ConnectionLineComponentProps>`
#`connectionLineWrapperStyles`	`React.CSSProperties`

鍵盤屬性

React Flow 允許您傳入一些不同的鍵盤快速鍵，作為與您的流程互動的另一種方式。我們嘗試設定合理的預設值，例如使用 Backspace 鍵刪除任何選取的節點或邊緣，但您可以使用這些屬性來設定您自己的快速鍵。

若要停用任何這些快速鍵，請將 null 傳遞給您想要停用的屬性。

名稱	類型	預設值
#`deleteKeyCode`	`字串 \| 字串[] \| null` 如果設定，按下按鍵或組合鍵將會刪除任何選取的節點和邊緣。傳遞陣列表示可以按下的多個按鍵。例如，["Delete", "Backspace"] 將在按下任一按鍵時刪除選取的元素。	`"Backspace"`
#`selectionKeyCode`	`字串 \| 字串[] \| null` 如果設定，按住此按鍵可讓您點擊並拖曳以在多個節點和邊緣周圍繪製選取框。傳遞陣列表示可以按下的多個按鍵。例如，["Shift", "Meta"] 將允許您在按下任一按鍵時繪製選取框。	`"Shift"`
#`multiSelectionKeyCode`	`字串 \| 字串[] \| null`	`"Meta" for MacOs, "Control" for other systems`
#`zoomActivationKeyCode`	`字串 \| 字串[] \| null` 如果設定了按鍵，即使 panOnScroll 設定為 false，您也可以在按住該按鍵時縮放視窗。將此屬性設定為 null 可以停用此功能。	`"Meta" for MacOs, "Control" for other systems`
#`panActivationKeyCode`	`字串 \| 字串[] \| null` 如果設定了按鍵，即使 panOnScroll 設定為 false，您也可以在按住該按鍵時平移視窗。將此 prop 設定為 null 可以停用此功能。	`"Space"`
#`disableKeyboardA11y`	`布林值` 您可以使用此 prop 來停用鍵盤輔助功能，例如使用方向鍵選取節點或移動選取的節點。	`false`

樣式屬性

將某些類別套用至畫布內渲染的元素，將會改變互動的處理方式。如果您需要，這些 prop 可讓您設定這些類別名稱。

名稱	類型	預設值
#`noPanClassName`	`字串` 如果畫布中的元素沒有停止滑鼠事件傳播，則點擊並拖曳該元素將會平移視窗。新增 "nopan" 類別可防止此行為，而此 prop 允許您變更該類別的名稱。	`"nopan"`
#`noDragClassName`	`字串` 如果節點是可拖曳的，則點擊並拖曳該節點將會在畫布上移動它。新增 "nodrag" 類別可防止此行為，而此 prop 允許您變更該類別的名稱。	`"nodrag"`
#`noWheelClassName`	`字串` 通常，當滑鼠在畫布上方時，滾動滑鼠滾輪會縮放視窗。將 "nowheel" 類別新增至畫布中的元素將防止此行為，而此 prop 允許您變更該類別的名稱。	`"nowheel"`

注意事項

此元件的 props 會匯出為 ReactFlowProps

API 參考 <ReactFlowProvider />