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

embedded/2024/11/14 19:17:33/

1.问题

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

2.思路

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

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

3.解决方案

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 (<ReactFlownodes={nodes}edges={edges}onNodesChange={onNodesChange}onEdgesChange={onEdgesChange}snapToGrid//	这里用条件语句切换传参//	如果不需要传参，只能传undefined!!!onEdgeUpdate={!readonly? onEdgeUpdate : undefined}onEdgeUpdateStart={onEdgeUpdateStart}onEdgeUpdateEnd={onEdgeUpdateEnd}onConnect={onConnect}fitViewattributionPosition="top-right"><Controls /></ReactFlow>);
};export default DeleteEdgeDrop;