useReactFlow()

GitHub 上的源代码 

¥Source on GitHub 

此钩子返回一个 ReactFlowInstance，可用于更新节点和边缘、操作视口或查询流的当前状态。

¥This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.

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>
  );
}

签名

¥Signature

This function does not accept any parameters.

TypeScript

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

¥This hook accepts a generic type argument of custom node & edge types. See this section in our TypeScript guide for more information.

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

注释

¥Notes

• 此钩子只能在作为 <ReactFlowProvider /> 或 <ReactFlow /> 组件的子组件中使用。

  ¥This hook can only be used in a component that is a child of a <ReactFlowProvider /> or a <ReactFlow /> component.

• 与 useNodes 或 useEdges 不同，此钩子不会导致你的组件在状态更改时重新渲染。相反，你可以在需要时通过使用此钩子返回的 ReactFlowInstance 上的方法来查询状态。

  ¥Unlike useNodes or useEdges, this hook won’t cause your component to re-render when state changes. Instead, you can query the state when you need it by using methods on the ReactFlowInstance this hook returns.