建立流程

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

入门

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

import ReactFlow, { Background, Controls } from 'reactflow';

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

参考：https://codesandbox.io/p/sandbox/nostalgic-dust-z48zzt?file=%2FApp.js&utm_medium=sandpack

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

1. 您需要导入样式。否则 React Flow 将无法工作。
2. 父容器需要宽度和高度，因为 React Flow 使用其父尺寸。
3. 如果一个页面上有多个流程，则需要向每个组件传递一个唯一的 id 属性，以使 React Flow 正常工作。

添加节点

现在流程已经设置完毕，让我们添加一些节点。为此，您需要创建一个包含节点对象的数组，如下所示：

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

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

参考预览：https://codesandbox.io/p/sandbox/elegant-cannon-n6m3mr?file=%2FApp.js&utm_medium=sandpack

让我们添加另一个节点，配置标签并使用第一个节点的节点类型输入。

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

参考预览：https://codesandbox.io/s/mhnmd2?file=%2FApp.js&utm_medium=sandpack

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

这看起来不错。让我们附加这两个节点。

添加边缘

现在我们有两个节点，让我们用一条边将它们连接起来。

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

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

参考预览：https://codesandbox.io/s/2tmynq?file=%2FApp.js&utm_medium=sandpack

让我们为这条边赋予 React Flow 内置的两个属性：一个标签和一个不同的类型。

参考预览：https://codesandbox.io/s/w2z9wm?file=%2FApp.js&utm_medium=sandpack

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