@unovo/react-modal是一个基于React实现的模态框组件，它简单易用，支持自定义样式和动画效果，支持快捷键、键盘焦点和自适应高度等优秀特性。本文将为大家详细介绍如何使用该 npm 包及其相关配置。
安装
@unovo/react-modal是一个npm包，可以使用npm或yarn进行安装。在命令行中输入以下命令：
npm install @unovo/react-modal
或者
yarn add @unovo/react-modal
基本用法
引入
在需要使用该模态框组件的组件中进行引入：
import Modal from '@unovo/react-modal';
使用
在组件中使用该模态框组件的最基本方法是将它作为 JSX 的一个子元素：
<Modal isOpen={true}>
<div>这里是你要展示的内容</div>
</Modal>我们可以看到，在Modal标签内部加入要显示的内容即可。同时还需要设置 isOpen属性为 true，表示该模态框处于打开状态。
属性
该包提供了一系列的 API，使得使用者可以自由控制该组件的显示和行为。
以下是常用的属性列表：
| Property | Type | Description |
|---|---|---|
| isOpen | boolean | 控制该模态框是否处于打开状态 |
| children | React.Element | 要显示的元素，可以是任何React元素 |
| onRequestClose | () => void | 当用户通过esc按键或点击 overlay部分时，会触发该回调函数 |
| shouldCloseOnOverlay | boolean | 除非该属性设置为false，否则在单击中央覆盖层overlay或按“ESC”键时将触发onRequestClose回调，以便关闭模态框。 |
| closeTimeoutMS | number | 指定当模态框从打开状态切换到关闭状态时，过渡总的时间（毫秒）。必须在模态框mounted后才能生效 |
| className | string | 可以为模态框添加额外的自定义类。该属性可以用来控制模态框的叠加顺序（z-index） |
| overlayClassName | string | 可以为遮罩层添加额外的自定义类，用来自定义样式 |
| portalClassName | string | 可以为React Portal添加自定义类，用来自定义样式 |
| bodyOpenClassName | string | 当模态框打开时会将该属性值添加到<body>标签上，以防止浏览器滚动。通常情况下不建议使用该属性，但在一些特殊情况下，例如模态框为全屏，该属性可能会派上用场。 |
| style | object | 可以为模态框添加内联样式 |
| overlayStyle | object | 可以为遮罩层添加内联样式 |
| portalStyle | object | 可以为React Portal添加内联样式 |
| contentLabel | string | 指定当模态框为有键盘焦点的元素时应该显示的文本标签 |
| appElement | HTMLElement | 指定模态框在打开时应该隐藏的根元素，默认情况下模态框会默认隐藏根元素。如果该属性未被指定，则会在组件的挂载和卸载时自动检测<body>标签和内嵌的<React>组件并安装/移除所述的“React”相关事件侦听器。建议为每个应用程序根元素手动指定该属性。 |
高级用法
自定义样式
我们可以通过在<Modal>组件中进行自定义样式来控制所有子元素的基本样式：
-- -------------------- ---- -------
------
-------------
--------
-------- -
---------------- -------- -- -- ------
--
-------- -
---------------- --------
------- ---- ----- ------
------------- ------
------- -------
------- -------
-------- -------
--------- -----------
------ -------
---- -------
--------- --------
------ -------
------- -----
--
--
-
---------------------
--------控制模态框的关闭
可以通过在<Modal>组件中添加一个关闭方法来控制模态框的关闭：
-- -------------------- ---- -------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - -
---------- -----
--
-
---------------- - -- -- -
--------------- ---------- ----- ---
--
--------------- - -- -- -
--------------- ---------- ---- ---
--
-------- -
------ -
-----
------- ---------------------------------------------
------ ----------------------------- ---------------------------------------
--------------
----------------
------- ----------------------------------------------
--------
------
--
-
-当我们点击打开模态框的按钮时，它会出现在视图上。当我们点击模态框内的关闭按钮时，或者按下 ESC键时，它会关闭。
自适应高度
@unovo/react-modal支持自适应高度，只要确保您的内容可以在各种窗口大小和显示比例下正确缩放。
具体实现方法是在样式中设置height:auto即可。以下是一个例子：
<Modal isOpen={true} style={{ content: { height: "auto" } }}>
<div>这里是你要展示的内容，该内容会随着模态框大小的改变自适应高度。</div>
</Modal>示例代码
-- -------------------- ---- -------
------ ---------- ---- ---------------------
------ ------ - -------- - ---- --------
-------- ----- -
----- ----------- ------------- - ----------------
------ -
-----
------- ----------- -- ----------------------------------
----------- ------------------ ------------------ -- ---------------------
--------------
----------------
------- ----------- -- -----------------------------------
-------------
------
--
-
------ ------- ----总结
以上是@unovo/react-modal的使用教程。通过上面的内容，大家应该已经了解了该组件的基本用法和一些高级属性的使用方法。当然，这些只是该组件的冰山一角，如果您需要更多详细的内容，可以通过查看@unovo/react-modal的官方文档来了解更多。希望大家可以通过本文的介绍，更好地使用和掌握该组件，提升自己的前端技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/90537