在前端开发中，弹出窗口是经常遇到的需求之一。@humblespark/react-modal 是一个 React 的弹出窗口组件，可用于各种场景中，比如登录框、注册框、提示框等。本文将介绍如何使用这个 npm 包，让你在开发中更加便捷。
步骤一：安装 @humblespark/react-modal
在使用任何 npm 包之前，必须先安装。可以通过以下命令进行安装：
npm install --save @humblespark/react-modal
步骤二：引入 @humblespark/react-modal
安装完成后，在需要使用组件的文件中引入 @humblespark/react-modal：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- ---------------------------
-------- ----- -
----- ----------- ------------- - ----------------
------ -
-----
------- ----------- -- ---------------------------------
------
------------------
------------------ -- --------------------
-
---------
--------
------
--
-
------ ------- ----这样就可以在 App 组件中使用 @humblespark/react-modal 了。在上面的例子中，我们使用 useState 声明了一个名为 showModal 的状态，用来控制弹窗的显示与隐藏。当用户点击“打开弹窗”按钮时，将 showModal 设置为 true，弹窗就会显示出来。当用户点击弹窗上的“关闭”按钮时，将 showModal 设置为 false，弹窗就会关闭。
属性
@humblespark/react-modal 支持多种属性，如下表所示：
| 属性名称 | 属性类型 | 默认值 | 说明 |
|---|---|---|---|
| isOpen | bool | false | 是否显示弹窗 |
| onRequestClose | func | 无 | 关闭弹窗的回调函数，需要将 isOpen 设置为 false |
| overlayClassName | string | 无 | 弹窗遮罩层的样式类名 |
| className | string | 无 | 弹窗主体的样式类名 |
| ariaHideApp | bool | true | 是否将弹窗元素从文档流中去除，避免干扰键盘和屏幕阅读器 |
| shouldCloseOnOverlayClick | bool | true | 是否允许在点击遮罩层时关闭弹窗 |
| shouldCloseOnEsc | bool | true | 是否允许在按下 Esc 键时关闭弹窗 |
| parentSelector | func | body | 返回弹窗的父元素，可以是函数或字符串 |
| style | object | {} | 弹窗元素的样式 |
| overlayStyle | object | {} | 弹窗遮罩层的样式 |
| contentLabel | string | 无 | 弹窗内容的描述，用于屏幕阅读器 |
| aria | object/string | 无 | 自定义 ARIA 属性，如 aria-label 或 aria-labelledby |
示例
下面是一个更加复杂的示例，展示了如何使用 @humblespark/react-modal 创建一个登录弹窗，包含表单验证和错误提示：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- ---------------------------
-------- ----------- -------- -- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ------- --------- - -------------
-------- ------------------- -
-----------------------
-- --------- --- -- -- -------- --- --- -
------------------------
-------
-
---------- --------- -------- ---
-
------ -
----- ------------------------
-----
------ -------------------------------
------
-------------
-----------
----------------
----------------- -- --------------------------------
--
------
-----
------ ------------------------------
------
-------------
---------------
----------------
----------------- -- --------------------------------
--
------
------ -- ---- --------------------------------
------- -------------------------
-------
--
-
-------- ------------ ------- -------------- -- -
------ -
------ --------------- --------------------------------
-----------
----------
-------------------- -- -
-------------------- ----------
-- -------
-----------------
--
--
--------
--
-
-------- ----- -
----- ----------- ------------- - ----------------
------ -
-----
------- ----------- -- -----------------------------------
----------- ------------------ ------------------ -- -------------------- --
------
--
-
------ ------- ----在这个例子中，我们通过创建一个 LoginForm 组件实现了登录表单，并在 LoginModal 中使用它。为了更好地演示如何处理错误提示信息，当表单提交时，我们会检查用户名和密码是否为空，如果是，就会将错误信息显示在页面上。如果登录信息合法，则会打印登录信息，并关闭弹窗。
结论
通过使用 @humblespark/react-modal，我们可以快速创建一个灵活的弹窗组件，可以轻松地适应不同的场景。本文介绍了 @humblespark/react-modal 的安装、引入和属性，还提供了一个完整示例，希望能够帮助读者更好地理解如何使用这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b381e8991b448def73