react-portal-universal 是一款用于 React 应用中进行弹出式组件实现的 npm 包。通过使用此包，你可以在你的应用中轻松地添加 Modal、Popover、Tooltip 等弹出式组件。本文将介绍如何使用 react-portal-universal 库，以及如何在你的 React 应用中集成和使用这个包。
安装和使用
你可以通过 npm 在你的 React 项目中添加 react-portal-universal 库，运行如下命令即可：
npm install --save react-portal-universal
在你的 React 应用中 import 该库：
import ReactDOM from 'react-dom';
import { Portal } from 'react-portal-universal';现在，你可以在需要弹出式组件的地方加入 Portal：
ReactDOM.createPortal(
<div>This content will be displayed in a Portal</div>,
document.getElementById('my-portal')
);需要注意的是，传递给 ReactDOM.createPortal 的第一个参数应该是一个 React 元素（例如 div 等等），用于在页面中展示内容；而传递给第二个参数的则为具体的 DOM 节点，它应该是某个需要在其中展示内容的 HTML 元素。
使用 react-portal-universal 来创建 Modal、Popover 等样式弹出式组件也是可以的，只需要在弹出式组件中包含 createPortal 代码块即可。
高级用法
你还可以使用 react-portal-universal 实现进一步高级的弹出式组件用法。例如，你可以通过监听 onOpen 和 onClose 事件来在 Modal 的打开和关闭时执行额外的代码，如下所示：
-- -------------------- ---- -------
----- ------- - -- ------- ------------ -- -- -
------- --------------- -----------------------
---------- ------- ----------
---------
--
----- --- ------- --------------- -
----- - - ------------ ----- --
--------- - -- -- --------------- ------------ ---- ---
---------- - -- -- --------------- ------------ ----- ---
-------- -
------ -
-----
------- ----------------------------- --------------
-------- ------------------------------- ------------------------------ --
------
--
-
-上面的代码中，我们定义了一个名为 MyModal 的函数组件，作为我们的弹出式组件，该组件包含了包裹在 Portal 组件中的实际 Modal 内容。我们在 MyModal 组件中传递 isOpen 和 onClose 属性，以便在创建 Portal 时控制 Modal 的打开和关闭，并且在任何时候都可以在该组件内部执行相关代码。此外，我们还定义了 App 组件，并在其中创建了一个按钮，点击该按钮会触发 Modal 的呈现和关闭。最后，我们将 MyModal 组件包含在 App 组件中，这样我们就可以开始使用自定义的 Modal 组件了！
总结
在本文中，我们已经介绍了如何使用 npm 包 react-portal-universal 来创建弹出式组件，并演示了在 React 中集成和使用这个包的方法，希望对你有所启发！如还有疑问，欢迎在评论中提问。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663081e8991b448e2176