在现代前端开发中，弹出式通知消息已成为一个必要的组件，既能够为用户提供必要的反馈信息，也能够增强用户体验。而 @dsisolutions/react-toastify 便是一个快速，易用，可定制的弹出式消息组件。
安装
在项目中使用 @dsisolutions/react-toastify 需要先安装它。只需在终端运行以下命令即可：
npm install --save @dsisolutions/react-toastify
引入
在安装 @dsisolutions/react-toastify 后，可以将组件导入到您的项目中：
import { ToastContainer, toast } from '@dsisolutions/react-toastify'; import '@dsisolutions/react-toastify/dist/ReactToastify.css';
然后，您需要用 <ToastContainer> 组件将弹出消息的容器包装起来：
function App() { return ( <div> {/* Your application code */} <ToastContainer /> </div> ); }
使用
现在，您可以在 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
