術語與定義

在文件這個部分，我們將解釋一些基本的 React Flow 術語和定義。在 React Flow 中，你會經常使用到三樣東西：節點、邊緣和控制點。

節點

React Flow 中的節點是一個 React 元件。這表示它可以呈現您想要的任何內容。每個節點都有一個 x 和 y 座標，告訴它在視窗中的位置。預設情況下，節點看起來像上面的範例。您可以在節點選項文件中找到所有自訂節點的選項。

自訂節點

這就是 React Flow 的魔法所在。您可以自訂節點的外觀和行為。您可能建立的許多功能並未內建於 React Flow 中。您可以使用自訂節點執行的一些操作包括：

• 呈現表單元素
• 視覺化資料
• 支援多個控制點

請參考自訂節點文件以取得更多資訊。

控制點

控制點（在其他函式庫中也稱為「port」）是邊緣連接到節點的地方。控制點可以放置在任何位置，並且可以根據您的喜好設定樣式。它只是一個 div 元素。預設情況下，它會在節點的頂部、底部、左側或右側顯示為一個灰色圓圈。建立自訂節點時，您可以在節點中擁有任意數量的控制點。更多資訊請參閱控制點文件。

邊緣

邊緣連接兩個節點。每個邊緣都需要一個目標節點和一個來源節點。React Flow 提供了四種內建的邊緣類型：預設（貝茲曲線）、smoothstep、step 和 straight。邊緣是一個 SVG 路徑，可以使用 CSS 設定樣式，並且完全可自訂。如果您使用多個控制點，可以單獨參照它們，為一個節點建立多個連接。

自訂邊緣

與自訂節點類似，您也可以自訂邊緣。人們使用自訂邊緣執行的操作包括：

• 新增一個按鈕來移除邊緣
• 自訂路由行為
• 無法僅使用一個 SVG 路徑解決的複雜樣式或互動

您可以在自訂邊緣 API網站上找到更多資訊。

連接線

React Flow 具有內建功能，可讓您從一個控制點點擊並拖曳到另一個控制點，以建立新的邊緣。在拖曳時，預留位置的邊緣稱為連接線。連接線也內建了四種類型，並且可以自訂。您可以在屬性區段中找到設定連接線的屬性。

視窗

React Flow 的所有內容都存在於視窗內。視窗具有 x、y 和縮放值。當您拖曳窗格時，您會變更 x 和 y 座標，當您放大或縮小時，您會變更縮放等級。