在前端开发中，有时我们需要将组件渲染在 DOM 树之外，这就需要使用到 Portal 技术。Portal 技术可以让我们在组件内部创建一个独立的 DOM 组件，并将其渲染到根节点之外的 HTML 元素上。@hypnosphi/react-portal 这个 npm 包为我们提供了一个使用方便、稳定可靠的 Portal 对象。
安装 @hypnosphi/react-portal
安装 @hypnosphi/react-portal 最简单的方式就是使用 npm：
--- ------- -----------------------
当然，如果你使用的是 Yarn，也可以使用以下命令安装：
---- --- -----------------------
使用 @hypnosphi/react-portal
在使用 @hypnosphi/react-portal 之前，我们需要先导入这个库：
------ ------ ---- -------------------------
然后，我们可以在组件内部使用 Portal，比如：
----- --- ------- --------------- -
------------------ -
------------
---------- - -
------- -----
-
--------------- - --------------------------
---------------- - ---------------------------
-
------------ -
--------------- ------- ---- --
-
------------- -
--------------- ------- ----- --
-
-------- -
------ -
-----
------- ---------------------------------------
------------------ -- -
--------
---- ------------------
---------------
------- ----------------------------------------
------
---------
--
------
-
-
-在这个例子中，我们定义了一个 App 组件，并且在 App 组件的 render 方法中，判断 isOpen 的值，如果为 true，就使用 Portal 组件将一个弹窗组件渲染到根元素之外。
使用场景
@hypnosphi/react-portal 可以在许多场景下使用，比如：
- 在 React 应用程序中创建 modal 或者 popover 组件
- 在 Web 应用程序中创建位置固定的组件，比如通知组件或者试图组件
如果您需要在 React 应用程序中创建一个 Portal 对象，可以使用 @hypnosphi/react-portal 这个 npm 包。这个库提供了一个简单易用的 API，并且性能优秀、支持 SSR，可以帮助您构建更加丰富、更加灵活的 Web 应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600557fb81e8991b448d515a