参考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: 字符串) => Node<T> | 未定义
#getInternalNode
(id: 字符串) => InternalNode<T> | 未定义
#getNodes
() => Node<T>[]
#addNodes
(payload: Node<T>[] | Node<T>) => void
将一个或多个节点添加到您现有的节点数组中。调用此函数将在受控流中触发 onNodesChange 处理程序。
#setNodes
(payload: Node<T>[] | ((nodes: Node<T>[]) => Node<T>[])) => void
通过用新数组覆盖现有节点数组或通过传递函数来更新现有数组，将您的节点数组设置为其他内容。如果使用函数，请确保返回一个新数组，而不是修改现有数组。调用此函数将在受控流中触发 onNodesChange 处理程序。
#getEdge
(id: 字符串) => Edge<U> | 未定义
#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: 字符串, nodeUpdate: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>), options?: { replace: 布尔值 }) => void
#updateNodeData
(id: 字符串, dataUpdate: Partial<NodeType['data']> | ((edge: NodeType) => Partial<NodeType['data']>), options?: { replace: 布尔值 }) => void
#updateEdge
(id: 字符串, edgeUpdate: Partial<EdgeType> | ((node: EdgeType) => Partial<EdgeType>), options?: { replace: 布尔值 }) => void
#updateEdgeData
(id: 字符串, dataUpdate: Partial<EdgeType['data']> | ((edge: EdgeType) => Partial<EdgeType['data']>), options?: { replace: 布尔值 }) => void
#getHandleConnections
({ 类型, 节点 ID, id }: { 类型: HandleType, 节点 ID: 字符串, id?: 字符串 | null }) => HandleConnection[]
获取特定节点所属句柄的所有连接。type 参数可以是 'source' 或 'target'。
#getNodesBounds
(nodes: (NodeType | InternalNode | 字符串)[]) => 矩形
返回给定节点或节点 ID 的边界。

交叉点

#getIntersectingNodes
(node: (部分<Node<T>> & { id: Node["id"] }) | 矩形, 部分?: 布尔值, nodes?: Node<T>[]) => Node<T>[]
查找当前与给定节点或矩形相交的所有节点。partially 参数可以设置为 true 以包括仅部分相交的节点。
#isNodeIntersecting
(node: (部分<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

此钩子接受自定义节点和边缘类型的泛型类型参数。有关更多信息，请参见我们 Typescript 指南中的本节。

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

备注

钩子实用程序