专为浏览器扩展开发而设计的 React Portal

[molvqingtai]

在使用 React 开发浏览器扩展时，你经常需要将 React 组件注入到宿主网页中。然而，这些页面中的目标挂载点通常是动态的——它们可能在扩展加载时并不存在，或者会随着用户的页面导航和交互被创建或销毁。

传统的 React portal 要求目标 DOM 元素在渲染前就已经存在，这在浏览器扩展场景下会带来如下问题：

• 宿主页面内容动态加载 —— 目标元素可能在 AJAX 请求、用户交互或页面导航后才出现
• 单页应用（ SPA ） —— 内容变化无需完整页面刷新，导致挂载点随时出现或消失
• 动态 DOM 操作 —— 第三方脚本或框架会持续修改 DOM 结构
• 时机不确定 —— 无法预知目标元素何时或是否会出现

React Magic Portal 通过自动检测目标元素在 DOM 中的出现和消失，解决了这些问题，确保你的 React 组件始终能在正确的时间、正确的位置渲染。

github: https://github.com/molvqingtai/react-magic-portal