Hooks
useConnection
當有作用中的連線互動時,useConnection hook 會回傳目前的連線。如果沒有作用中的連線互動,則會為每個屬性回傳 null。此 hook 的典型使用情境是根據特定條件(例如,連線是否有效)來為 handle 上色。
閱讀更多useEdges
此 hook 會回傳目前邊的陣列。使用此 hook 的元件會在任何邊變更時重新渲染。
閱讀更多useEdgesState
此 hook 可讓您輕鬆建立受控流程的原型,您可以在 ReactFlowInstance 外部管理節點和邊的狀態。您可以將其視為 React 的 useState
hook,並帶有一個額外的輔助回呼。
useHandleConnections()
此 hook 會回傳目前邊的陣列。使用此 hook 的元件會在任何邊變更時重新渲染。
閱讀更多useKeyPress
此 hook 可讓您監聽特定的按鍵代碼,並告知您目前是否已按下它們。
閱讀更多useNodeId
您可以使用此 hook 來取得它所使用的節點的 ID。如果您需要在渲染樹的較深處使用節點的 ID,但不希望手動向下傳遞 ID 作為 prop,這會很有用。
閱讀更多useNodes
此 hook 會回傳目前節點的陣列。使用此 hook 的元件會在任何節點變更時重新渲染,包括當節點被選取或移動時。
閱讀更多useInternalNode
此 hook 會為給定的節點 ID 回傳一個 InternalNode 物件。
閱讀更多useNodesData()
透過此 hook,您可以訂閱特定節點的節點資料變更。
閱讀更多useNodesInitialized
此 hook 會告訴您流程中的所有節點是否都已測量並給定寬度和高度。當您將節點新增至流程時,此 hook 會先回傳 false,然後在節點測量完成後再次回傳 true。
閱讀更多useNodesState
此 hook 可讓您輕鬆建立受控流程的原型,您可以在 ReactFlowInstance 外部管理節點和邊的狀態。您可以將其視為 React 的 useState
hook,並帶有一個額外的輔助回呼。
useOnSelectionChange
此 hook 可讓您監聽節點和邊選取的變更。顧名思義,當節點或邊的選取發生變更時,將會呼叫您提供的回呼。
閱讀更多useOnViewportChange
useOnViewportChange hook 可讓您監聽視窗的變更,例如平移和縮放。您可以為視窗變更的每個階段提供回呼:onStart、onChange 和 onEnd。
閱讀更多useReactFlow
此 hook 會回傳一個 ReactFlowInstance,可用於更新節點和邊、操作視窗或查詢流程的目前狀態。
閱讀更多useStore
此 hook 可用於訂閱 React Flow 元件的內部狀態變更。useStore hook 是從 Zustand 狀態管理程式庫重新匯出的,因此您應該查看其文件以了解更多詳細資訊。
閱讀更多useStoreApi
在某些情況下,您可能需要直接存取 store。此 hook 會回傳 store 物件,可用於按需存取狀態或分派動作。
閱讀更多useUpdateNodeInternals
當您以程式方式新增或移除節點的 handle,或更新節點的 handle 位置時,您需要使用此 hook 來告知 React Flow。這將會更新節點的內部尺寸,並在必要時正確地重新定位畫布上的 handle。
閱讀更多useViewport
useViewport hook 是一種在元件中讀取視窗目前狀態的便捷方式。使用此 hook 的元件會在視窗變更時重新渲染。
閱讀更多