開發工具與除錯

React Flow 看起來常常像一個神奇的黑盒子，但實際上，如果您知道從哪裡看，可以揭示很多關於其內部狀態的資訊。在本指南中，我們將向您展示三種不同的方式來揭示您的流程的內部狀態。

• 一個 <ViewportLogger /> 元件，顯示視窗的當前位置和縮放比例。
• 一個 <NodeInspector /> 元件，顯示每個節點的狀態。
• 一個 <ChangeLogger />，它會包裝您的流程的 onNodesChange 處理器，並在每次分派時記錄每個變更。

雖然我們發現這些工具對於確保 React Flow 正常運作很有用，但當您的流程及其互動變得更複雜時，您也可能會發現它們對於除錯您的應用程式很有用。

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

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

我們鼓勵您將此範例中的任何或所有元件複製到您自己的專案中，並修改它們以符合您的需求：每個元件都是獨立運作的！

節點檢測器

<NodeInspector /> 元件使用我們的 useNodes 鉤子來存取流程中的所有節點。通常，我們不鼓勵使用此鉤子，因為它會在任何節點變更時觸發重新渲染，但這正是它對於除錯如此有用的原因！

React Flow 在測量節點的尺寸後，會將 width 和 height 屬性新增至每個節點。我們會將這些尺寸以及其他資訊（如節點的 id 和類型）傳遞到自訂的 <NodeInfo /> 元件。

我們使用 <EdgeLabelRenderer /> 元件，讓我們將檢測器渲染到 React Flow 的視窗中。這表示它的內容將隨著使用者平移和縮放，與流程的其他部分一起定位和轉換。

變更記錄器

從 React Flow 本身產生的任何節點和邊的變更都會透過 onNodesChange 和 onEdgesChange 回呼傳達給您。如果您正在使用受控流程（這表示您自己管理節點和邊），您需要將這些變更套用至您的狀態，以保持所有內容同步。

<ChangeLogger /> 元件會將您提供的 onNodesChange 處理器包裝在一個自訂函式中，該函式會攔截並記錄每次分派的變更。我們可以透過使用 useStore 和 useStoreApi 鉤子來存取儲存區，然後相應地更新 React Flow 的內部狀態來完成。這兩個鉤子讓您可以強大地存取 React Flow 的內部狀態和方法。

除了除錯之外，使用 <ChangeLogger /> 也是一個了解 React Flow 如何運作以及讓您思考可以在每次變更之上建構的不同功能的絕佳方式。

您可以在 API 參考中找到關於 NodeChange 和 EdgeChange 類型的文件。

視窗記錄器

<ViewportLogger /> 是您如果知道要尋找什麼，可以從 React Flow 的儲存區中提取的狀態的最簡單範例。視窗的狀態在內部儲存在 transform 鍵下（我們從 d3-zoom 繼承的名稱）。此元件會擷取轉換的 x、y 和 zoom 元件，並將它們渲染到 <Panel /> 元件中。

讓我們知道您的想法

如上所述，如果您對如何改進開發工具有任何回饋或想法，請在 Discord 上或透過郵件 info@xyflow.com 告訴我們。如果您使用這些想法建構了自己的開發工具，我們很樂意聽到！