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 鉤子，並且可能更易於使用。

工具