useNodesState

GitHub 源码

此钩子使您能够轻松地构建受控流程，其中您在<code class="nextra-code" dir="ltr">ReactFlowInstance</code>外部管理节点和边的状态。您可以将其视为 React 的<code class="nextra-code" dir="ltr">useState</code>钩子，它带有一个额外的辅助回调函数。

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 /> 组件的 nodes 属性，或者您可能想先对其进行操作以执行一些布局，例如。
#`[1]`	`React.Dispatch<React.SetStateAction<Node<T>[]>>` 一个函数，您可以用它来更新节点。您可以向其传递一个新的节点数组或一个回调函数，该回调函数接收当前的节点数组并返回一个新的节点数组。这与 React 的 useState 钩子返回的元组的第二个元素相同。
#`[2]`	`(changes: NodeChange[]) => void` 一个方便的回调函数，它可以接受一个 NodeChanges 数组并相应地更新节点状态。您通常会将其直接传递给<ReactFlow /> 组件的 onNodesChange 属性。

Typescript

此钩子接受自定义节点类型的泛型类型参数。有关更多信息，请参阅我们 Typescript 指南中的<a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="/learn/advanced-use/typescript#nodetype-edgetype-unions">此部分</a>。

const nodes = useNodesState<CustomNodeType>();

备注

此钩子是为了简化原型设计和使我们的文档示例更清晰而创建的。虽然在生产中使用此钩子是可以的，但在实践中，您可能希望使用更复杂的 state 管理解决方案，例如<a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://flow.reactjs.ac.cn/docs/guides/state-management/" target="_blank" rel="noreferrer">Zustand</a>。

Hooks 工具函数