在现代前端开发中，弹出式通知消息已成为一个必要的组件，既能够为用户提供必要的反馈信息，也能够增强用户体验。而 @dsisolutions/react-toastify 便是一个快速，易用，可定制的弹出式消息组件。
安装
在项目中使用 @dsisolutions/react-toastify 需要先安装它。只需在终端运行以下命令即可：
--- ------- ------ ----------------------------
引入
在安装 @dsisolutions/react-toastify 后，可以将组件导入到您的项目中：
------ - --------------- ----- - ---- ------------------------------- ------ ------------------------------------------------------
然后，您需要用 <ToastContainer> 组件将弹出消息的容器包装起来：
-------- ----- -
------ -
-----
--- ---- ----------- ---- ---
--------------- --
------
--
-使用
现在，您可以在 React 组件中使用 toast 属性轻松创建弹出式消息：
-------- --------- -
----- ------ - -- -- ----------------- -- -- ----- -----------
------ -
-----
------- --------------------------------
------
--
-
您可以在上面的代码中看到，我们使用 toast.error() 方法创建了一个错误类型的弹出式消息。除了 error 类型，还有 info、success 和 warning 类型可供选择。
自定义
@dsisolutions/react-toastify 为您提供了大量用于自定义的选项。您可以更改主题配色，设置关闭按钮，选择位置等等。
以下是一些自定义示例以及注释：
-------- --------- -
----- ------------- - -- -- --------------
----- -- - ------ ------- ----------
-
--------- ------------------------ -- ----
---------- ------ -- ------
---------------- ----- -- -----
------------ ------ -- ------
------------------ ---------------------- -- ----------
-------------- -------------------- -- ---------
---------- --------------- -- ---------
---------- ----- -- --------
------------- ------ -- -----------
-
--
------ -
-----
------- ---------------------------------------
--------------- --
------
--
-
在上面的代码中，我们自定义了一个成功类型的消息，指定了位置，禁用了自动关闭，隐藏了进度条和关闭按钮，并添加了一些额外的类名和选项。此外，还可以将 draggable 属性设置为 false，以禁用用户拖动消息的功能。
注意事项
- 根据使用情况，您可以将
ToastContainer组件放在应用程序中的任何地方，但建议最好放在页面的底部。 toast属性支持简写toast.success('message)或全写toast({type:'success', message:'message'})两种方式。
总结
使用 @dsisolutions/react-toastify 组件实现弹出式通知消息无需专业知识或复杂的配置。组件既易用又可定制，您可以使用内置选项自定义各种类型的消息，以让消息更好地适合您的项目。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f5d9381d61a3540e96