react-portal-minimal 是一个用于在 React 应用中创建 Portal 的 npm 包。Portal 是将组件渲染到 DOM 组件树之外的一种技术，它可以解决一些常见的布局问题，例如创建模态框、下拉菜单、弹出通知等。
在本文中，我们将介绍如何使用 react-portal-minimal 创建 Portal。
1. 安装
使用 npm 或者 yarn 安装 react-portal-minimal：
npm i react-portal-minimal # 或 yarn add react-portal-minimal
2. 创建 Portal
要创建一个 Portal，我们需要引入 createPortal 函数，并使用它将组件渲染到指定容器：
-- -------------------- ---- -------
------ - ------------ - ---- ------------
------ - --------- - ---- -----------------------
-------- ------------ -
----- - ------- ------- - - ------
----- --------- - ------------
-- --------- -
------ -----
-
------ -------------
---- ------------------
------- --------------------------------
---- ------------------------------------------------
-------
----------
--
-上面的代码中，我们首先声明了一个 Modal 组件，它接受 isOpen 和 onClose 两个 props。在组件内部，我们使用 usePortal hook 获取 Portal 容器，然后判断 isOpen 是否为真，如果不是，则返回 null，否则使用 createPortal 函数将 <div className="modal"> 渲染到指定的容器中。
3. 使用 Portal
我们可以在应用中任何地方使用 Modal 组件，例如在 App 组件中：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- ----------
-------- ----- -
----- ------------- --------------- - ----------------
----- --------------- - -- -- -
---------------------
--
----- ---------------- - -- -- -
----------------------
--
------ -
-----
------- ------------------------------ --------------
------ -------------------- ---------------------------
--------- ----------
-------- -----------
--------
------
--
-在 App 组件中，我们定义了一个 isModalOpen 状态和两个回调函数 handleOpenModal 和 handleCloseModal。当用户点击“Open Modal”按钮时，调用 handleOpenModal，则 isModalOpen 状态变为真，此时 Modal 组件将被渲染到应用中。
总结
在本文中，我们介绍了如何使用 npm 包 react-portal-minimal 创建 Portal。我们首先使用 usePortal hook 获取 Portal 容器，然后使用 createPortal 函数将组件渲染到指定的容器。通过一个简单的例子，我们展示了如何在应用中使用 Modal 组件来创建模态框。Portal 技术可以帮助我们解决一些常见的布局问题，它是 React 开发中的一个非常有用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597681e8991b448d6fc4