useNodesState
這個 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}
/>
);
}簽名
| 名稱 | 類型 |
|---|---|
#參數 | |
# initialNodes | Node<T>[] |
#回傳 | |
# [0] | Node<T>[]目前的節點陣列。您可以將其直接傳遞到 <ReactFlow /> 元件的節點屬性，或者您可能希望先操作它以執行一些佈局，例如。 |
# [1] | React.Dispatch<React.SetStateAction<Node<T>[]>>您可以用來更新節點的函式。您可以傳遞新的節點陣列或接收目前節點陣列並回傳新節點陣列的回呼。這與 React 的 useState Hook 回傳的元組的第二個元素相同。 |
# [2] | (changes: NodeChange[]) => void一個方便的回呼，可以接受 NodeChanges 陣列並相應地更新節點狀態。您通常會將其直接傳遞到 <ReactFlow /> 元件的 onNodesChange 屬性。 |
Typescript
這個 Hook 接受自訂節點類型的泛型類型引數。請參閱我們的 Typescript 指南中的此部分以取得更多資訊。
const nodes = useNodesState<CustomNodeType>();注意事項
- 建立此 Hook 是為了讓原型設計更容易，並使我們的文件範例更清晰。雖然在生產環境中使用此 Hook 是可以的，但實際上您可能想要使用更複雜的狀態管理解決方案，例如 Zustand。