applyNodeChanges()

GitHub 上的源代码 

¥Source on GitHub 

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

¥Various events on the <ReactFlow /> component can produce a NodeChange that describes how to update the nodes of your flow in some way. If you don’t need any custom behavior, this util can be used to take an array of these changes and apply them to your nodes.

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} />
  );
}

签名

¥Signature

注释

¥Notes

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

  ¥If you don’t need any custom behavior, the useNodesState hook conveniently wraps this util and React’s useState hook for you and might be simpler to use.