applyNodeChanges()

在 <ReactFlow /> 组件上的各种事件可以产生一个 NodeChange，它描述了如何以某种方式更新流程中的节点。如果您不需要任何自定义行为，可以使用此实用程序来获取这些更改的数组并将其应用于您的节点。

import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges } from '@xyflow/react';
 
export default function Flow() {
  const [nodes, setNodes] = useState([]);
  const [edges, setEdges] = useState([]);
  const onNodesChange = useCallback(
    (changes) => {
      setNodes((oldNodes) => applyNodeChanges(changes, oldNodes));
    },
    [setNodes],
  );
 
  return (
    <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
  );
}

签名

名称	类型
#参数
#`changes`	`NodeChange[]`
#`nodes`	`Node[]`
#返回值
#	`Node[]`

笔记

如果您不需要任何自定义行为，useNodesState 钩子方便地为您包装了此实用程序和 React 的 useState 钩子，可能更易于使用。

工具