useEdgesState
這個 hook 可以讓您輕鬆地原型化一個受控的流程，讓您在 ReactFlowInstance 之外管理節點和邊的狀態。您可以把它想像成 React 的 useState hook，但多了一個輔助回呼函式。
import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';
const initialNodes = [];
const initialEdges = [];
export default function () {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
/>
);
}簽名
| 名稱 | 類型 |
|---|---|
#參數 | |
# initialEdges | Edge<T>[] |
#回傳值 | |
# [0] | Edge<T>[]目前的邊的陣列。您可能會將這個直接傳遞給您的 <ReactFlow /> 元件的 edges 屬性，或者您可能會想先操作它來執行一些佈局，例如。 |
# [1] | React.Dispatch<React.SetStateAction<Edge<T>[]>>一個可以用來更新邊的函式。您可以傳遞一個新的邊的陣列，或者一個接收目前的邊的陣列並回傳一個新的邊的陣列的回呼函式。這與 React 的 useState hook 回傳的元組的第二個元素相同。 |
# [2] | (changes: EdgeChange[]) => void一個方便的回呼函式，可以接收一個 EdgeChanges 的陣列並據此更新邊的狀態。您通常會將這個直接傳遞給您的 <ReactFlow /> 元件的 onEdgesChange 屬性。 |
Typescript
這個 hook 接受自訂邊類型的泛型型別引數。有關更多資訊，請參閱我們 Typescript 指南的此章節。
const nodes = useEdgesState<CustomEdgeType>();注意事項
- 這個 hook 的建立是為了讓原型製作更簡單，並讓我們的文件範例更清晰。雖然在生產環境中使用這個 hook 是可以的，但實際上您可能想使用更複雜的狀態管理解決方案，例如 Zustand。