介绍
@zadkiel/mui-redux-alerts 是一个 React 组件库，它的目的是让创建弹窗变得更加容易。这个库是建立在 Material-UI 和 Redux 的基础之上的，虽然选择这两个依赖项可能会使您在安装上带来额外的负担，但是这个库将为您带来很多方便和易用性。
在阅读本文之前，您需要对 React, Material-UI 和 Redux 有所了解。
安装
使用 npm
要使用 npm 安装该库，您需要在终端中进入您的项目所在的目录，然后在命令行中输入：
npm install --save @zadkiel/mui-redux-alerts
使用 yarn
要使用 yarn 安装该库，您需要在终端中进入您的项目所在的目录，然后在命令行中输入：
yarn add @zadkiel/mui-redux-alerts
如何使用
引入样式
使用这个库之前您需要先引入 Material-UI 的 CSS，可以在您的项目的 index.js 文件中添加下面这行代码：
import 'typeface-roboto'; import '@fortawesome/fontawesome-free/css/all.css'; import '@fortawesome/fontawesome-free/css/fontawesome.css'; import '@fortawesome/fontawesome-free/css/brands.css'; import '@fortawesome/fontawesome-free/css/solid.css'; import '@fortawesome/fontawesome-free/css/regular.css'; import '@fortawesome/fontawesome-free/css/v4-shims.css';
这些 CSS 给了您所依赖的任何 Material-UI 组件可用的样式。
引入库
@zadkiel/mui-redux-alerts 将为您的项目中提供 <Alert /> 和 <ConfirmationDialog /> 两个组件，您可以像这样将它们引入到您的项目中：
import React from 'react';
import { Alert, ConfirmationDialog } from '@zadkiel/mui-redux-alerts';使用 <alert>
这是一个基本用法示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
------ - -------------- - ---- ----------------------------
-------- ------------- -
----- -------- - --------------
----- ----------- - -- -- -
----------------------------------------------- --- ---- ------------ --------- ---- -----------------
--
------ -
-----
------- -------------------------- ----------------
------ --
------
--
-在这个例子中，我们创造了一个 <button> 元素，并在按钮的 onClick 事件中调用了 dispatch 函数，将 ActionCreators.alert 的返回值作为参数传递。Alert 组件则会将内容渲染为弹窗。如果您再次单击 <alert> 组件中的任何按钮或单击弹窗外的任何位置，弹窗都将消失。
使用 <confirmationdialog>
这是一个基本用法示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
------ - -------------- - ---- ----------------------------
-------- ------------- -
----- -------- - --------------
----- ----------- - -- -- -
---------------------------------- --- ---- -- ------ ---- ------- -- -- - ------------------- --- ------- ----
--
------ -
-----
------- ---------------------------- -------------
------------------- --
------
--
-在这个例子中，我们创造了一个 <button> 元素，并在按钮的 onClick 事件中调用了 dispatch 函数，将 ActionCreators.dialog 的返回值作为参数传递。ConfirmationDialog 组件则会将内容渲染为弹窗。如果您单击弹窗中的“确定”按钮，它将调用在 dispatch 函数中传递的回调函数。如果您单击“取消”按钮或弹窗外的任何位置，弹窗都将消失。
结论
我们已经看到了如何使用 @zadkiel/mui-redux-alerts 这个组件库来使创建弹窗变得更加容易。虽然这个库使用了 Material-UI 和 Redux，但并不难上手。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572d081e8991b448e9071