参考Hooks

Hooks

useConnection

useConnection hook 在有活动连接交互时返回当前连接。 如果没有活动连接交互,则对每个属性都返回 null。 此 hook 的典型用例是根据特定条件(例如,连接是否有效)对句柄进行着色。

了解更多

useEdges

此 hook 返回当前边的数组。 使用此 hook 的组件将在任何边发生变化时重新渲染。

了解更多

useEdgesState

此 hook 使原型化受控流程变得容易,您可以在其中管理 ReactFlowInstance 外部的节点和边的状态。 您可将其视为 React 的 useState hook,并具有额外的辅助回调。

了解更多

useNodeId

您可以使用此 hook 获取它在其中使用的节点的 ID。 如果您需要渲染树更深处的节点 ID,但不想手动向下钻取 ID 作为道具,则此方法很有用。

了解更多

useNodes

此 hook 返回当前节点的数组。 使用此 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

在某些情况下,您可能需要直接访问商店。 此 hook 返回商店对象,可在需要时用于访问状态或调度操作。

了解更多

useUpdateNodeInternals

当您以编程方式向节点添加或删除句柄,或更新节点的句柄位置时,您需要使用此 hook 告知 React Flow。 这将更新节点的内部尺寸,并在必要时正确重新定位画布上的句柄。

了解更多

useViewport

useViewport hook 是一种方便的方法,用于在组件中读取视窗的当前状态。 使用此 hook 的组件将在视窗发生变化时重新渲染。

了解更多