核心概念

在接下來的部分，我們將向您介紹 React Flow 的核心概念，並說明如何建立互動式流程。流程由節點和邊緣組成（或僅由節點組成）。您可以將 nodes 和 edges 的陣列作為 props 傳遞到 ReactFlow 元件。在此，所有節點和邊緣的 id 都需要是唯一的。節點需要位置和標籤（如果您使用自訂節點，則可能有所不同），邊緣需要來源（節點 id）和目標（節點 id）。您可以在節點選項和邊緣選項章節中閱讀更多選項。

受控或非受控

使用 React Flow，您有兩種方式可以設定流程。您可以建立受控或非受控流程。我們建議使用受控流程，但對於較簡單的使用案例，您也可以設定非受控流程。在接下來的部分，我們將設定受控流程。 讓我們開始將一些節點和邊緣新增到 ReactFlow 元件中

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

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

基本功能

預設情況下，除了在您設定受控流程時處理視窗之外，React Flow 不會執行任何內部狀態更新。與 <input /> 元件一樣，您需要傳遞處理常式，以將 React Flow 觸發的變更應用於您的節點和邊緣。為了選取、拖曳和移除節點和邊緣，您需要實作 onNodesChange 和 onEdgesChange 處理常式

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

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

這裡發生了什麼事？每當 React Flow 觸發變更（節點初始化、節點拖曳、邊緣選取等）時，就會呼叫 onNodesChange 處理常式。我們匯出 applyNodeChanges 處理常式，讓您無需自行處理變更。applyNodeChanges 處理常式會傳回更新後的節點陣列，也就是您的新節點陣列。您現在擁有一個具有以下互動類型的互動式流程

• 可選取的節點和邊緣
• 可拖曳的節點
• 可移除的節點和邊緣 -（按下 Backspace 以移除選取的節點或邊緣，可以使用 deleteKeyCode prop 調整）
• 按下 Shift 來進行多重選取區域（這是預設的 selectionKeyCode）
• 按下 command 來進行多重選取（這是預設的 multiSelectionKeyCode）

為了方便起見，我們匯出輔助 hook useNodesState 和 useEdgesState，您可以使用它們來建立節點和邊緣狀態

const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

連接節點

若要獲得完整的互動性，最後缺少的部分是 onConnect 處理常式。您需要實作它，才能處理新的連線。

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

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

在此範例中，我們使用 addEdge 處理常式，該常式會傳回包含新建立的邊緣的邊緣陣列。如果您想在建立邊緣時設定某個邊緣選項，請像這樣傳遞您的選項

const onConnect = useCallback(
  (connection) =>
    setEdges((eds) => addEdge({ ...connection, animated: true }, eds)),
  [setEdges],
);

或使用 defaultEdgeOptions prop

const defaultEdgeOptions = { animated: true };
...
<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onConnect={onConnect}
  defaultEdgeOptions={defaultEdgeOptions}
/>;