建立流程

在本節中，我們將說明如何建立受控的流程元件。現在您已將 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>
}

您建立了第一個邊緣，做得好！您可能已經意識到您無法拖曳或選取節點。在下一部分中，您將學習如何使流程具有互動性。