构建流程

¥Building a Flow

在本节中，我们将解释如何创建受控流组件。现在你已将 React Flow 安装到你的 React 项目中，所有文件都已准备就绪，可以开始使用 React Flow 了。

¥In this section we are explaining how to create a controlled flow component. Now that you’ve installed React Flow into your React project, all files are in place to start using React Flow.

入门

¥Getting Started

让我们创建一个带有控制面板和背景的空流。为此，我们需要从 reactflow 包导入组件：

¥Let’s create an empty flow with a controls panel and a background. For this we need to import the components from the reactflow package:


import { ReactFlow, Background, Controls } from '@xyflow/react';

我们现在可以使用组件来渲染空流：

¥We can now use the components to render an empty flow:


import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

这里有三件重要的事情需要记住：

¥There are three important things to keep in mind here:

你需要导入样式。否则 React Flow 将无法工作。

¥You need to import the styles. Otherwise React Flow won’t work.
父容器需要宽度和高度，因为 React Flow 使用其父尺寸。

¥The parent container needs a width and a height, because React Flow uses its parent dimensions.
如果一页上有多个流，则需要将唯一的 id 属性传递给每个组件以使 React Flow 正常工作。

¥If you have multiple flows on one page, you need to pass a unique id prop to each component to make React Flow work properly.

添加节点

¥Adding Nodes

现在流程已经设置好，让我们添加一些节点。要做到这一点，你需要创建一个包含节点对象的数组，如下所示：

¥Now that the flow is set up, let’s add some nodes. To do this, you need to create an array with node objects like this:


const nodes = [
  {
    id: '1', // required
    position: { x: 0, y: 0 }, // required
    data: { label: 'Hello' }, // required
  },
];

现在可以将这些节点添加到流中：

¥These nodes can now be added to the flow:


import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const nodes = [
  {
    id: '1',
    position: { x: 0, y: 0 },
    data: { label: 'Hello' },
  },
];
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

让我们添加另一个节点，配置标签，并将节点类型 input 用于第一个节点。

¥Let’s add another node, configure labels and use the node type input for the first node.


const nodes = [
  {
    id: '1',
    position: { x: 0, y: 0 },
    data: { label: 'Hello' },
    type: 'input',
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'World' },
  },
];


import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

有很多方法可以配置节点。你可以在节点选项站点上看到完整的选项列表。

¥There are plenty of ways to configure nodes. You can see the full list of options on the node option site.

看起来不错。让我们连接这两个节点。

¥This looks good. Let’s attach these two nodes.

添加边

¥Adding an Edge

现在我们有两个节点，让我们用边连接它们。

¥Now that we have two nodes, let’s connect them with an edge.

要创建边缘，我们需要指定两个属性：源节点（边的起始位置）和目标节点（边的终止位置）。我们使用两个节点的 id 来指定这一点（在我们的示例中，我们的两个节点的 ID 为 “1” 和 “2”）：

¥To make an edge, we need to specify two attributes: the source node (where the edge begins) and the target node (where the edge ends). We use the id of the two nodes to specify this (in our example, our two nodes have ids of “1” and “2”):


const edges = [{ id: '1-2', source: '1', target: '2' }];


import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const edges = [{ id: '1-2', source: '1', target: '2' }];
 
const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

让我们为该边缘提供两个内置于 React Flow 中的属性，一个 label 和一个不同的 type。

¥Let’s give this edge two properties that are built into React Flow, a label and a different type.


import { ReactFlow, Controls, Background } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const edges = [
  { id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' },
];
 
const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];
 
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

你制作了第一个边，干得好！你可能已经意识到你无法拖动或选择节点。在下一部分中，你将学习如何使流程具有交互性。

¥You made your first edge, nice work! You might have realized that you can’t drag or select nodes. In the next part you’ll learn how to make the flow interactive.