參考Hooks
useReactFlow()

useReactFlow

GitHub 上的原始碼

這個 Hook 會傳回一個 ReactFlowInstance，可用於更新節點和邊、操作視窗，或查詢流程的目前狀態。

import { useCallback, useState } from 'react';
import { useReactFlow } from '@xyflow/react';
 
export function NodeCounter() {
  const reactFlow = useReactFlow();
  const [count, setCount] = useState(0);
  const countNodes = useCallback(() => {
    setCount(reactFlow.getNodes().length);
    // you need to pass it as a dependency if you are using it with useEffect or useCallback
    // because at the first render, it's not initialized yet and some functions might not work.
  }, [reactFlow]);
 
  return (
    <div>
      <button onClick={countNodes}>Update count</button>
      <p>There are {count} nodes in the flow.</p>
    </div>
  );
}

簽名

節點和邊

#getNode
(id: string) => Node<T> | undefined
#getInternalNode
(id: string) => InternalNode<T> | undefined
#getNodes
() => Node<T>[]
#addNodes
(payload: Node<T>[] | Node<T>) => void
將一個或多個節點新增至現有的節點陣列。呼叫此函式將會在受控制的流程中觸發 onNodesChange 處理常式。
#setNodes
(payload: Node<T>[] | ((nodes: Node<T>[]) => Node<T>[])) => void
將您的節點陣列設定為其他內容，方法是使用新陣列覆寫它，或傳入函式來更新現有的陣列。如果使用函式，請務必確保傳回新的陣列，而不是變更現有的陣列。呼叫此函式將會在受控制的流程中觸發 onNodesChange 處理常式。
#getEdge
(id: string) => Edge<U> | undefined
#getEdges
() => Edge<U>[]
#addEdges
(payload: Edge<U>[] | Edge<U>) => void
將一個或多個邊新增至現有的邊陣列。呼叫此函式將會在受控制的流程中觸發 onEdgesChange 處理常式。
#setEdges
(payload: Edge<U>[] | ((edges: Edge<U>[]) => Edge<U>[])) => void
將您的邊陣列設定為其他內容，方法是使用新陣列覆寫它，或傳入函式來更新現有的陣列。如果使用函式，請務必確保傳回新的陣列，而不是變更現有的陣列。呼叫此函式將會在受控制的流程中觸發 onEdgesChange 處理常式。
#toObject
() => ReactFlowJsonObject<T, U>
此函式會傳回您目前 React Flow 圖表的 JSON 表示法。
#deleteElements
DeleteElements
#updateNode
(id: string, nodeUpdate: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>), options?: { 取代: 布林值 }) => void
#updateNodeData
(id: string, dataUpdate: Partial<NodeType['資料']> | ((邊緣: NodeType) => Partial<NodeType['資料']>), options?: { 取代: 布林值 }) => void
#updateEdge
(id: string, edgeUpdate: Partial<邊緣類型> | ((node: 邊緣類型) => Partial<邊緣類型>), options?: { 取代: 布林值 }) => void
#updateEdgeData
(id: string, dataUpdate: Partial<邊緣類型['資料']> | ((邊緣: 邊緣類型) => Partial<邊緣類型['資料']>), options?: { 取代: 布林值 }) => void
#getHandleConnections
({ 類型, 節點 ID, id }: { 類型: 處理類型, 節點 ID: string, id?: string | 空值 }) => HandleConnection[]
取得屬於特定節點的處理的所有連線。type 參數可以是 'source' 或 'target'。
#getNodesBounds
(nodes: (NodeType | InternalNode | string)[]) => 矩形
傳回給定節點或節點 ID 的邊界。

交集

#getIntersectingNodes
(node: (Partial<Node<T>> & { id: Node["id"] }) | 矩形, 部分地?: 布林值, nodes?: Node<T>[]) => Node<T>[]
尋找目前與給定節點或矩形相交的所有節點。可以將 partially 參數設定為 true，以包含僅部分相交的節點。
#isNodeIntersecting
(node: (Partial<Node<T>> & { id: Node["id"] }) | 矩形, 區域: 矩形, 部分地?: 布林值) => 布林值
判斷給定的節點或矩形是否與另一個矩形相交。可以將 partially 參數設定為 true，即使節點僅部分相交也傳回 true。

視口欄位

#viewportInitialized
布林值
React Flow 需要將視口掛載到 DOM 並初始化其縮放和平移行為。此屬性會告訴您何時
#zoomIn
(options?: { 持續時間: 數字; }) => void
#zoomOut
(options?: { 持續時間: 數字; }) => void
#zoomTo
(縮放層級: 數字, options?: { 持續時間: 數字; }) => void
將視口縮放到給定的縮放層級。傳入持續時間會將視口動畫化為新的縮放層級。
#getZoom
() => 數字
取得視口的目前縮放層級。
#setViewport
(視口: Viewport, options?: { 持續時間: 數字; }) => void
#getViewport
() => Viewport
#fitView
(fitViewOptions?: FitViewOptions) => 布林值
#setCenter
(x: 數字, y: 數字, options?: { 持續時間: 數字, 縮放: 數字; }) => void
將視口置中在給定的位置。傳入持續時間會將視口動畫化為新位置。
#fitBounds
(邊界: 矩形, options?: { 持續時間: 數字, 邊距: 數字; }) => void
將視口調整為給定矩形的低階實用函式。藉由傳入持續時間，視口會從目前位置動畫化到新位置。padding 選項可用於在邊界周圍新增空間。
#screenToFlowPosition
(位置: { x: 數字; y: 數字; }) => { x: 數字; y: 數字; }
使用此函式，您可以將螢幕像素位置轉換為流程位置。這對於從側邊欄實作拖放功能很有用。
#flowToScreenPosition
(位置: { x: 數字; y: 數字; }) => { x: 數字; y: 數字; }
將流程畫布內的位置轉換為螢幕像素位置。

Typescript

此 Hook 接受自訂節點和邊緣類型的泛型型別引數。如需更多資訊，請參閱我們 Typescript 指南中的這個章節。

const reactFlow = useReactFlow<CustomNodeType, CustomEdgeType>();

注意事項

HooksUtils