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

原创

已于 2024-05-07 23:26:36 修改 · 748 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ReactFlow #ReactFlow传参 #取消onEdgeUpdate #ReactFlow实例传参

于 2024-05-07 23:25:45 首次发布

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: {