不受控制的流程

¥Uncontrolled Flow

有两种方法可以使用 React Flow - 受控或不受控。受控意味着你可以控制节点和边的状态。在不受控制的流中，节点和边的状态由 React Flow 在内部处理。在本部分中，我们将向你展示如何使用不受控制的流程。

¥There are two ways to use React Flow - controlled or uncontrolled. Controlled means, that you are in control of the state of the nodes and edges. In an uncontrolled flow the state of the nodes and edges is handled by React Flow internally. In this part we will show you how to work with an uncontrolled flow.

不受控制的流的实现更简单，因为你不需要传递任何处理程序：

¥An implementation of an uncontrolled flow is simpler, because you don’t need to pass any handlers:


import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { defaultNodes } from './nodes';
import { defaultEdges } from './edges';
 
const edgeOptions = {
  animated: true,
  style: {
    stroke: 'white',
  },
};
 
const connectionLineStyle = { stroke: 'white' };
 
export default function Flow() {
  return (
    <ReactFlow
      defaultNodes={defaultNodes}
      defaultEdges={defaultEdges}
      defaultEdgeOptions={edgeOptions}
      fitView
      style={{
        backgroundColor: '#D3D2E5',
      }}
      connectionLineStyle={connectionLineStyle}
    />
  );
}

如你所见，我们传递 defaultEdgeOptions 来定义边缘是动画的。这很有用，因为你不能再使用 onConnect 处理程序将自定义选项传递给新创建的边缘。尝试将 “节点 B” 与 “节点 C” 连接，你会看到新边缘是动画。

¥As you can see, we are passing defaultEdgeOptions to define that edges are animated. This is helpful, because you can’t use the onConnect handler anymore to pass custom options to a newly created edge. Try to connect “Node B” with “Node C” and you see that the new edge is animated.

更新节点和边

¥Updating Nodes and Edges

由于你的本地状态中没有节点和边缘，因此你无法直接更新它们。为此，你需要使用带有更新内部状态功能的 React Flow 实例。你可以通过 onInit 回调接收实例，或者通过使用 useReactFlow 钩子更好地接收实例。让我们创建一个按钮，在随机位置添加一个新节点。为此，我们用 ReactFlowProvider 封装我们的流程并使用 addNodes 函数。

¥Since you don’t have nodes and edges in your local state, you can’t update them directly. To do so, you need to use the React Flow instance that comes with functions for updating the internal state. You can receive the instance via the onInit callback or better by using the useReactFlow hook. Let’s create a button that adds a new node at a random position. For this, we are wrapping our flow with the ReactFlowProvider and use the addNodes function.

💡

此示例中的 Flow 组件与 ReactFlowProvider 一起封装以使用 useReactFlow 钩子。

¥The Flow component in this example is wrapped with the ReactFlowProvider to use the useReactFlow hook.


import { useCallback } from 'react';
import { ReactFlow, ReactFlowProvider, useReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { defaultNodes } from './nodes';
import { defaultEdges } from './edges';
 
const edgeOptions = {
  animated: true,
  style: {
    stroke: 'white',
  },
};
 
const connectionLineStyle = { stroke: 'white' };
 
let nodeId = 0;
 
function Flow() {
  const reactFlowInstance = useReactFlow();
  const onClick = useCallback(() => {
    const id = `${++nodeId}`;
    const newNode = {
      id,
      position: {
        x: Math.random() * 500,
        y: Math.random() * 500,
      },
      data: {
        label: `Node ${id}`,
      },
    };
    reactFlowInstance.addNodes(newNode);
  }, []);
 
  return (
    <>
      <ReactFlow
        defaultNodes={defaultNodes}
        defaultEdges={defaultEdges}
        defaultEdgeOptions={edgeOptions}
        fitView
        style={{
          backgroundColor: '#D3D2E5',
        }}
        connectionLineStyle={connectionLineStyle}
      />
      <button onClick={onClick} className="btn-add">
        add node
      </button>
    </>
  );
}
 
export default function () {
  return (
    <ReactFlowProvider>
      <Flow />
    </ReactFlowProvider>
  );
}