ReactFlow的ReactFlow实例事件传参undefined处理状态切换

1.问题

ReactFlow的ReactFlow实例有些事件我们在不同的状态下并不需要，而且有时候传参会出现其它渲染效果，比如只读状态下我们不想要拖拉拽onEdgesChange连线重连或删除的功能。

2.思路

事件名称	类型	默认值
onEdgesChange	(changes: EdgeChange[]) => void 使用这个方法来处理处理连线重新选择连接或者删除连线。

ReactFlow实例如果没有传监听事件方法，父节点就不会触发事件，那么我们试着切换传参处理。通过传参undefined，成功的没有触发对应事件，同时也没有出现渲染可拖拉拽连线的标志。

3.解决方案

js 复制代码

import React, { useCallback, useRef, useState } from 'react';
import ReactFlow, { useNodesState, useEdgesState, Controls, updateEdge, addEdge } from 'reactflow';
import 'reactflow/dist/style.css';

const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Node A' },
    position: { x: 250, y: 0 },
  },
  {
    id: '2',
    type: 'output',
    data: { label: 'Node B' },
    position: { x: 250, y: 200 },
  }
];

const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'updatable edge' }];


const DeleteEdgeDrop = () => {
  const edgeUpdateSuccessful = useRef(true);
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onConnect = useCallback((params) => setEdges((els) => addEdge(params, els)), []);

  //	用于控制状态
  const [readonly, setReadonly] = useState(true);

  const onEdgeUpdateStart = useCallback(() => {
    edgeUpdateSuccessful.current = false;
  }, []);

  const onEdgeUpdate = useCallback((oldEdge, newConnection) => {
    edgeUpdateSuccessful.current = true;
    setEdges((els) => updateEdge(oldEdge, newConnection, els));
  }, []);

  const onEdgeUpdateEnd = useCallback((_, edge) => {
    if (!edgeUpdateSuccessful.current) {
      setEdges((eds) => eds.filter((e) => e.id !== edge.id));
    }

    edgeUpdateSuccessful.current = true;
  }, []);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      snapToGrid
      //	这里用条件语句切换传参
      //	如果不需要传参，只能传undefined!!!
      onEdgeUpdate={!readonly? onEdgeUpdate : undefined}
      onEdgeUpdateStart={onEdgeUpdateStart}
      onEdgeUpdateEnd={onEdgeUpdateEnd}
      onConnect={onConnect}
      fitView
      attributionPosition="top-right"
    >
      <Controls />
    </ReactFlow>
  );
};

export default DeleteEdgeDrop;

4.结果

事件传参传undefined成功的取消了事件以及渲染效果。综上所述，在ReactFlow的ReactFlow实例事件可通过传参undefined取消传参或切换事件传参。