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 依赖这个组件才能工作。
你想在 ReactFlow 组件之外访问流程的内部状态。
你正在一个页面上处理多个流程。
你正在使用客户端路由。


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;