Hooks 和 Providers

¥Hooks and Providers

React Flow 提供了几个 hooks 和一个上下文提供程序，可帮助你增强流的功能。这些工具可以帮助你更有效地管理状态、访问内部方法和创建自定义组件。

¥React Flow provides several hooks and a context provider for you to enhance the functionality of your flow. These tools help you to manage state, access internal methods, and create custom components more effectively.

ReactFlowProvider

ReactFlowProvider 是一个上下文提供程序，它允许你从组件树中的任何位置（甚至在 ReactFlow 组件之外）访问流的内部状态，例如节点、边和视口。它通常用于应用的顶层。

¥The ReactFlowProvider is a context provider that allows you to access the internal state of the flow, such as nodes, edges, and viewport, from anywhere in your component tree even outside the ReactFlow component. It is typically used at the top level of your application.

在以下几种情况下，你可能需要使用 ReactFlowProvider 组件：

¥There are several cases where you might need to use the ReactFlowProvider component:

我们提供的许多 hooks 都依赖于此组件运行。

¥Many of the hooks we provide rely on this component to work.
你想要访问 ReactFlow 组件外部的流内部状态。

¥You want to access the internal state of the flow outside of the ReactFlow component.
你正在一个页面上处理多个流程。

¥You are working with multiple flows on a page.
你正在使用客户端路由。

¥You are using a client-side router.


import React, { useCallback } from 'react';
import {
  Background,
  ReactFlow,
  ReactFlowProvider,
  useNodesState,
  useEdgesState,
  addEdge,
  Controls,
} from '@xyflow/react';
 
import Sidebar from './Sidebar';
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  {
    id: 'provider-1',
    type: 'input',
    data: { label: 'Node 1' },
    position: { x: 250, y: 5 },
  },
  { id: 'provider-2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
  { id: 'provider-3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
  { id: 'provider-4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
];
 
const initialEdges = [
  {
    id: 'provider-e1-2',
    source: 'provider-1',
    target: 'provider-2',
    animated: true,
  },
  { id: 'provider-e1-3', source: 'provider-1', target: 'provider-3' },
];
 
const ProviderFlow = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onConnect = useCallback(
    (params) => setEdges((els) => addEdge(params, els)),
    [],
  );
 
  return (
    <div className="providerflow">
      <ReactFlowProvider>
        <div className="reactflow-wrapper">
          <ReactFlow
            nodes={nodes}
            edges={edges}
            onNodesChange={onNodesChange}
            onEdgesChange={onEdgesChange}
            onConnect={onConnect}
            fitView
          >
            <Controls />
            <Background />
          </ReactFlow>
        </div>
        <Sidebar nodes={nodes} setNodes={setNodes} />
      </ReactFlowProvider>
    </div>
  );
};
 
export default ProviderFlow;

useReactFlow

useReactFlow 钩子提供对 ReactFlowInstance 及其方法的访问。它允许你以编程方式操作节点、边和视口。

¥The useReactFlow hook provides access to the ReactFlowInstance and its methods. It allows you to manipulate nodes, edges, and the viewport programmatically.

此示例演示了如何使用 useReactFlow 钩子。

¥This example illustrates how to use the useReactFlow hook.


import React, { useCallback } from 'react';
import {
  Background,
  ReactFlow,
  ReactFlowProvider,
  addEdge,
  useNodesState,
  useEdgesState,
} from '@xyflow/react';
 
import Buttons from './Buttons';
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Node 1' },
    position: { x: 250, y: 5 },
  },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
];
 
const initialEdges = [
  {
    id: 'e1-2',
    source: '1',
    target: '2',
  },
  { id: 'e1-3', source: '1', target: '3' },
];
 
const ProviderFlow = () => {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onConnect = useCallback(
    (params) => setEdges((els) => addEdge(params, els)),
    [],
  );
 
  return (
    <ReactFlowProvider>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      >
        <Buttons />
        <Background />
      </ReactFlow>
    </ReactFlowProvider>
  );
};
 
export default ProviderFlow;