简介
在现代化 Web 应用中，模态框是一个非常重要的组件。然而，它并不是很容易实现，因为模态框需要脱离父元素的文档流，而又需要保留父元素的上下文。为了实现这个功能，我们需要使用第三方库，例如 React 的 Portals 或者 jQuery 的 Dialog 组件。在这篇文章中，我们将会介绍如何使用 npm 包 @reach/portal 快速构建一个模态框组件。
前置知识
在使用 @reach/portal 之前，你需要了解 React 基础和 JSX 语法。如果你还不熟悉这些概念，可以先去学习一下 React 的基础知识。
安装
使用 npm 安装 @reach/portal：
npm install @reach/portal --save
使用
首先，引入 @reach/portal 组件并创建一个基础的模态框：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------ - ---- ----------------
-------- ------- -
----- -------- ---------- - ----------------
----- ----------- - -- -- -
-------------------
--
------ -
-----
------- -------------------------- --------------
------- -- -
--------
---- ------------------
------- --------------------------- --------------
-------- -----------
------
---------
--
------
--
-
------ ------- ------在模态框中，我们使用 useState 钩子和一个布尔值 isOpen 来控制模态框的开启和关闭状态。通过点击按钮来触发 toggleModal 函数，从而改变 isOpen 值。当 isOpen 为 true 时，使用 @reach/portal 的 Portal 组件将模态框的内容渲染到根节点下，脱离父元素的文档流。
在渲染 Portal 组件时，我们将模态框的内容放入了它的子元素中，这样才能实现将模态框内容渲染到根节点下的效果。如果你不熟悉在 JSX 中返回多个元素的写法，可以在渲染时用数组包裹它们来实现：
-- -------------------- ---- -------
------ -
------- -------------------------- ---------------
------ -- -
--------
---- ------------------
------- --------------------------- --------------
-------- -----------
------
---------
--
--最后，我们需要在 CSS 中设置模态框的样式。这里只是一个简单的示例，你可以根据实际需求来自定义样式：
-- -------------------- ---- ------- ------ - --------- ------ ---- ---- ----- ---- ------ ------ ------- ------ -------- ----- ----------------- ----- ---------- --------------- ------ -
总结
@reach/portal 是一个非常实用的 npm 包，它可以帮助我们快速创建模态框组件。在使用过程中，我们需要注意以下几点：
- 在渲染 Portal 组件时，必须将需要被渲染的内容作为它的子元素返回。
- 需要在 CSS 中设置模态框的样式。
- 可以使用 useState 钩子来控制模态框的开启和关闭状态。
希望这篇文章能够对你理解和使用 @reach/portal 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2bda7e3b0ab45f74a8bb74