介绍
React-s-alert 是一款顶部或底部浮动提示框的 React 组件库，采用了 React 和 Redux 技术体系，可快速实现类似于 Growl 的选择框效果，使得消息提示与应用程序本身隔离开来。
React-s-alert 出现在应用程序中时，它的提示框层会浮动在应用程序上方，并提供以下功能：
- 自动关闭
- 顶端或底端显示
- 可扩展的自定义样式
- 动画效果
安装
你可以通过 npm 包管理工具安装 react-s-alert：
npm install --save react-s-alert
使用
在你的组件中，你可以通过引入 SAlert 和 SAlertContainer 来使用 react-s-alert：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------
------ - --------------- - ---- ----------------
-
----- --- - -- -- -
-----
----------- -- -- --------
---------------- --
------
--
------ ------- ----SAlert 组件会自动启动并运行。你可以通过为你的组件设置 message 属性来显示消息的内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------
------ - --------------- - ---- ----------------
-
----- --- - -- -- -
-----
----------- -- -- --------
---------------- --
------- ----------- -- -------------------- ----- --- ---- ---------
---- -----
---------
------
--
------ ------- ----上面的代码会在按钮点击后，自动调用 SAlert 组件的 success 方法来提示用户邮件已经发送成功。
属性
React-s-alert 组件引用了几种自定义属性让你来控制它的行为，下面是这些属性：
message：可自定义消息内容，它们可以使用带有自定义样式的 HTML 来表示。
SAlert.success('<h3>Email Sent!</h3>');position：设置提示框的显示位置，取值可以是top或bottom。
<SAlertContainer position={'bottom'} />timeout：设置提示框的显示时间（以毫秒为单位），等到时间到了就会自动关闭提示框。
<SAlertContainer timeout={5000} />effect：设置提示框的关闭效果，取值可以是slide或scale。
<SAlertContainer effect={'slide'} />offset：设置提示框与浏览器视口的上（或下）边距，以像素为单位。
<SAlertContainer offset={100} />示例代码
下面是一个完整的 React-s-alert 组件的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ----------------
------ - --------------- - ---- ----------------
----- --- - -- -- -
-----
----------- -- -- ---------
------- ----------- -- -------------------- ----- --- ---- ---------
---- -----
---------
----------------
----------------------
----------------
--------------
-----------
--
------
--
------ ------- ----这个示例调用 SAlert 组件的 success 方法来提示用户邮件发送成功。提示框会在距离浏览器顶部90像素的地方顶栏的右侧滑动出现，并停留4秒钟后自动消失。
结论
React-s-alert 是一款极其有用的 React 组件。通过这个库，你可以轻松实现消息提示框的功能，使得应用程序更加完善和友好。如果你正在开发一个 React 应用程序，并且需要一些简单但又强大的消息提示功能，那么请考虑试用 React-s-alert！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/205009