构建流程

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

入门

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

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

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

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

这里有三点需要注意

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

添加节点

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

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

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

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

让我们添加另一个节点，配置标签并使用 input 节点类型来表示第一个节点。

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

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

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

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

添加边

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

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

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

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

让我们为这条边添加两个 React Flow 内置属性，一个 label 和不同的 type。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

您创建了第一条边，干得漂亮！您可能已经意识到，您无法拖动或选择节点。在下一部分中，您将学习如何使流程具有交互性。