如果你是一个前端开发人员，肯定经常遇到需要在 React 应用中使用 portal 的情况。在这种情况下，npm 包 @nbostrom/react-portal-umd 是一个非常好的选择。本文将介绍如何使用这个 npm 包。
npm 包介绍
@nbostrom/react-portal-umd 是一个将 React 组件渲染到另一个 DOM 元素中的 portal 工具。这个工具可以让你在某个节点中渲染一个组件，而这个组件实际上并不挂载在这个节点上，而是挂载在另一个节点中。这样可以让我们在不打乱页面结构的情况下，实现一些很酷的功能。
安装
使用 npm 安装：
npm install @nbostrom/react-portal-umd
使用
1. 引入
在你的 React 组件中引入这个包：
import Portal from '@nbostrom/react-portal-umd';
2. 传递渲染的目标节点
在组件中传递需要渲染的目标节点作为 container 的 prop。例如：
-- -------------------- ---- -------
-------- -
------ -
-----
------- -------------------------------------
------- ---------------------------------------------
---- ------------------
------------
----------------
------
---------
---- -----------------
------
--
-在上面的例子中，我们向 Portal 组件传递了 container prop，目标节点是 id 为 modal 的 DOM 元素。
3. 可选传递渲染时的 class
可以通过传递 className prop，来添加渲染时的 class。例如：
-- -------------------- ---- -------
-------- -
------ -
-----
------- -------------------------------------
------- -------------------------------------------- -------------------------
---- ------------------
------------
----------------
------
---------
---- -----------------
------
--
-在上面的例子中，我们向 Portal 组件传递了 className prop，渲染出的组件会有一个名为 portal-modal 的 class。
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- -----------------------------
----- --- ------- --------- -
------- - -- -- -
--------------- ---------- ---- ---
-
-------- -
------ -
-----
------- -------------------------------------
------- -------------------------------------------- -------------------------
---- ------------------
------------
----------------
------
---------
---- -----------------
------
--
-
-
------ ------- ----总结
在本文中，我们介绍了如何在 React 应用中使用 @nbostrom/react-portal-umd 这个 npm 包。通过这个工具，我们可以实现 portal 的功能，从而在不打乱页面结构的情况下，实现一些很酷的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24485a