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