构建流程

¥Building a Flow

在本节中，我们将向你介绍 React Flow 的基础知识，并指导你创建第一个流程。

¥In this section, we’ll introduce you to the basics of React Flow and guide you through creating your first flow.

入门

¥Getting Started

让我们先创建一个带有控制面板和背景的空流程。首先，我们需要从 @xyflow/react 包中导入一些基本组件：

¥Let’s start by creating an empty flow with a controls panel and a background. First, we need to import some basic components from the @xyflow/react package:

import { ReactFlow, Background, Controls } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

现在我们可以使用这些组件来渲染一个空流。这里有三件重要的事情需要记住：

¥We can now use these components to render an empty flow. There are three important things to keep in mind here:

1. 别忘了导入样式表。否则，React Flow 将无法工作。

   ¥Don’t forget to import the stylesheet. Otherwise, React Flow won’t work.

2. 父容器需要宽度和高度，因为 React Flow 使用其父级尺寸。

   ¥The parent container needs a width and a height because React Flow uses its parent dimensions.

3. 如果一页上有多个流，则需要将唯一的 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.

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;

添加节点

¥Adding Nodes

现在流程设置完毕，是时候添加节点了 - 每个节点代表图表中具有特定位置和内容的元素。创建一个 节点对象 数组，如下所示：

¥Now that the flow is set up, it’s time to add nodes—each node represents an element in your diagram with a specific position and content. Create an array of node objects like this:

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

然后，我们可以像这样将第一个节点添加到流中：

¥Then we can add our first node to the flow like this:

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 应用于第一个节点。React Flow 使用不同的节点类型来指示其角色。输入节点（由类型 input 指定）通常用作流程的入口点。

¥Let’s add another node, and apply the node type input to the first node. React Flow uses different node types to indicate their roles. An input node—designated by the type input—typically serves as the entry point to your flow.

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;

在 React Flow 中，有很多方法可以配置节点。我们提供了一些内置选项，你可以在 node 文档中探索。然而，在自定义节点方面，可能性是无穷无尽的。更多详情，请查看我们关于 自定义节点 的指南。

¥There are many ways to configure nodes in React Flow. We have several built-in options that you can explore in the node documentation. However, when it comes to customizing nodes, the possibilities are endless. For more details, check out our guide on customizing nodes.

添加边

¥Adding an Edge

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

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

要创建边，我们定义一个唯一的边 ID 并指定两个属性：源（边的起点）和目标（边的终点）。在此示例中，我们使用迄今为止创建的两个节点（“1” 和 “2”）的 id 值来定义边：

¥To create an edge, we define a unique edge id and specify two attributes: the source (where the edge begins) and the target (where it ends). In this example, we use the id values of the two nodes we created so far—“1” and “2”—to define the edge:

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

此边将带有 id “1”（源）的节点与带有 id “2”（目标）的节点连接起来。

¥This edge connects the node with id “1” (the source) to the node with id “2” (the target).

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 和 “step” type。

¥Let’s give this edge two properties that are built into React Flow, a label and a “step” 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.