简介
react-promise-modal 是一个轻量级的 React 模块，它可以帮助我们在 React 应用中快速的创建 Promise 弹窗。
在很多前端程序中，我们需要在某些异步操作时给用户一个提示框，在得到异步操作结果后，再根据结果决定提示框应该显示什么内容。
react-promise-modal 正是解决这种需求的好工具。
安装
要使用 react-promise-modal，我们需要先安装它。安装命令如下：
npm install react-promise-modal
引入
安装后，我们需要在我们的 React 应用中引入它。如果你使用的是 ES6 的语法，可以这样引入：
import React from 'react'; import ReactDOM from 'react-dom'; import PromiseModal from 'react-promise-modal';
如果你使用的是 CommonJS 的语法，可以这样引入：
var React = require('react');
var ReactDOM = require('react-dom');
var PromiseModal = require('react-promise-modal');使用
引入后，我们就可以开始使用 react-promise-modal 了。
首先，我们需要在应用中注册 PromiseModal 组件。我们可以将 PromiseModal 组件包裹在一个高阶组件中。
以下是一个例子，演示如何在 React 应用中注册 PromiseModal 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------ ---- ----------------------
----- --- ------- --------------- -
-------- -
------ -
-----
------------- --
--------- -----------
------
--
-
-
-------------------- --- --------------------------------在上面的代码中，我们使用 <PromiseModal /> 标签注册了 PromiseModal 组件。
现在我们可以开始创建弹窗，根据异步操作的执行结果显示不同的弹窗内容了。
示例
下面我们来演示一个例子。
假设我们在应用中需要向服务器请求某个资源，请求成功时我们需要在弹窗中显示 "Success"，请求失败时我们需要在弹窗中显示 "Failed"。
以下是一个使用 react-promise-modal 的例子，演示如何在 React 应用中实现上述功能：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------ ---- ----------------------
----- --- ------- --------------- -
------------- -
----- ------- - ----------------------------------------------
--------------------- -
-------- -------------
-------- ----------
------ --------
---------------- -- -
----------------------
-------------- -- -
-------------------
---
-
-------- -
------ -
-----
------------- --
------- ------------------------------------------ ------------
------
-
-
-
-------------------- --- --------------------------------在上面的代码中，我们在 handleClick() 方法中发起了一个异步请求，然后使用 react-promise-modal 创建了一个弹窗对用户进行提示。
在创建弹窗时，我们需要传递一个 Promise 对象，并且指定弹窗的内容。
如果请求成功，弹窗的内容会是一个 "Success" 的提示。
如果请求失败，弹窗的内容会是一个 "Failed" 的提示。
当创建弹窗完成后，PromiseModal 方法会返回一个 Promise 对象。
在这个例子中，我们使用 then() 和 catch() 方法处理了异步请求的结果，并打印到控制台上。
总结
在使用 react-promise-modal 时，请注意以下几点：
- 请确保你已经成功安装并引入
react-promise-modal。 - 在需要使用弹窗功能的组件中注册
<PromiseModal />组件。 - 使用
PromiseModal方法创建弹窗，并在创建弹窗时指定弹窗的内容。 - 处理弹窗的结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e8381e8991b448dbe0e