🐞MiniMap与react Portal冲突 导致react节点dom叠加

[sitexue]

问题描述

同时使用react Portal和MiniMap，并且将react节点设置id，并通过addChild设置父子关系，会产生如下问题：
1、控制太会告警id重复
2、同时如果删除其中一个子节点，会导致其余节点的dom重复。

重现链接

https://codesandbox.io/p/sandbox/rough-resonance-xc2hv3

重现步骤

1、进入页面
2、打开控制台，可以看到same key 的报错
3、选中显示为node的节点，按backspace删除该节点，就会出现dom重复的情况

预期行为

无控制台报错，删除节点时表现正常

平台

• 操作系统: Windows
• 网页浏览器: edge
• X6 版本: 3.1.4

屏幕截图或视频（可选但最好有）

补充说明（可选）

No response

[GaoFuhong]

因为是一个页面挂载一次 Provider，MiniMap 也有自己的 Graph，会复制主图节点。如果 MiniMap 的 Graph 也使用 React 视图并由同一个 Provider 管理，两个 Graph 的同 id 节点会被作为同一个 React 子节点渲染，导致重复 key 以及视觉上的重复显示。有两个办法：1、MiniMap 改为简单的 NodeView 渲染；2、MiniMap 的 Graph 使用自定义 NodeView，把 React 组件直接挂到 foreignObject 中，不经过 Provider（基于你的 demo 里面简单实现了 https://codesandbox.io/p/sandbox/loving-tdd-qrgh2l ）。