前言
在前端开发中，弹出层（Modal）是一个非常常见的功能，但是实现弹出层并不是一件简单的事情，通常需要耗费大量的时间和精力，让开发者不免感到头痛。为此，社区出现了很多优秀的 Modal 组件库，其中典型代表就是 react-simplified-modal。这个组件库提供了简洁易用的 API，并支持多种类型的 Modal，如 Alert、Confirm、Prompt，本文将深入介绍如何使用它。
安装
在项目中安装 react-simplified-modal 的方法很简单，只需要在控制台中使用 npm 命令：
npm install react-simplified-modal
当然，前提是您已经安装了 Node.js 和 npm。
使用
在项目中引入 react-simplified-modal 的方式也非常简单，只需要在需要使用 Modal 的组件中引入即可，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- -------------------------
------ ------- ----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
---------- ------
---------- ---
----------- ---
------------- ---
--
-
-------- -
------ -
--
-- -- ----- --
------
-----------------------------
---------------------------
-----------------------------
---------------------------------
----------- -- --------------- ---------- ----- ---
--
-- ------
------- ----------- -- --------------- ---------- ----- ---------- -------- ----------- ----- ------------- --------- ---------------
---
--
-
-如上代码所示，我们在 Example 组件中引入了 Modal 组件，并使用了它的四个属性：
isOpen属性代表是否打开 Modal；type属性代表 Modal 的类型，包括 Alert、Confirm、Prompt；title属性代表 Modal 的标题；content属性代表 Modal 的内容。
在 Example 组件中，我们使用了一个按钮来触发 Modal 的打开，并通过 setState 方法修改了 Modal 的属性。这样，当我们点击按钮时，Modal 就会以 Alert 的类型打开，并显示一个提示框，询问是否要删除。
API
react-simplified-modal 提供了以下 API：
Modal
Modal 是主组件，它包括以下属性：
isOpen (必填)
- 类型：
boolean - 默认值：
false
控制 Modal 是否打开。
type (选填)
- 类型：
'alert' | 'confirm' | 'prompt' - 默认值：
'alert'
指定 Modal 的类型。如果是 alert，则只显示一个确定按钮；如果是 confirm，则显示确认和取消按钮；如果是 prompt，则会显示一个输入框和确认。
title (选填)
- 类型：
string - 默认值：
''
指定 Modal 的标题。
content (选填)
- 类型：
string|ReactNode - 默认值：
''
指定 Modal 的内容。
cancelText (选填)
- 类型：
string - 默认值：
'取消'
指定取消按钮上显示的文字（仅在 confirm 和 prompt 类型中有效）。
confirmText (选填)
- 类型：
string - 默认值：
'确定'
指定确认按钮上显示的文字（仅在 confirm 和 prompt 类型中有效）。
placeholder (选填)
- 类型：
string - 默认值：
''
指定输入框的提示文字（仅在 prompt 类型中有效）。
onClose (必填)
- 类型：
() => void - 默认值：
() => {}
当 Modal 关闭时触发的回调函数。
Alert
Alert 组件是 Modal 的简化版本，它只有一个确定按钮，并且不需要设置 type 属性，使用方法如下：
import React from 'react';
import { Alert } from 'react-simplified-modal';
export default class Example extends React.Component {
render() {
return <Alert title='提示' content='确定要删除吗？' onClose={() => {}} />;
}
}Confirm
Confirm 组件是 Modal 的简化版本，它只有确认和取消按钮，并且 type 属性为 confirm，使用方法如下：
import React from 'react';
import { Confirm } from 'react-simplified-modal';
export default class Example extends React.Component {
render() {
return <Confirm title='提示' content='确定要删除吗？' onClose={() => {}} />;
}
}Prompt
Prompt 组件是 Modal 的简化版本，它包含一个输入框和确认和取消按钮，并且 type 属性为 prompt，使用方法如下：
import React from 'react';
import { Prompt } from 'react-simplified-modal';
export default class Example extends React.Component {
render() {
return <Prompt title='提示' content='请输入姓名：' placeholder='请输入姓名' onClose={() => {}} />;
}
}示例
以下是 react-simplified-modal 的完整示例代码，双击运行即可查看效果。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ -------- ------ - ---- -------------------------
------ --------------
------ ------- ----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
---------- ------
---------- ---
----------- ---
------------- ---
--
-
-------- -
------ -
--
-------------------------- -------
---- --------------------------
------- ----------- -- --------------- ---------- ---- ------ --------------
------- ----------- -- --------------- ---------- ----- ---------- -------- ----------- ----- ------------- --------- ------------------
------- ----------- -- --------------- ---------- ----- ---------- ---------- ----------- ----- ------------- --------- --------------------
------- ----------- -- --------------- ---------- ----- ---------- --------- ----------- ----- ------------- --------- ------------ ------- -------------------
------
------
-----------------------------
---------------------------
-----------------------------
---------------------------------
------------------------------------
---------------
----------------
----------- -- --------------- ---------- ----- ---
--
------ ---------- ----------------- ----------- -- --- --
-------- ---------- ----------------- ----------- -- --- --
------- ---------- ---------------- ------------------- ----------- -- --- --
---
--
-
-总结
使用 react-simplified-modal 组件库可以轻松地实现弹出层的功能，既简单又易用。希望本文对大家有所帮助，感谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822b46