React 警报通知示例| primereact 教程

吐司或警报通知用户界面是网页的基本元素，用于向用户显示操作的状态。状态包括信息、警告、成功、错误。在本教程中，解释了如何在React应用程序中显示警告或敬酒信息。

PrimeReact是一个开源的react组件库，为reactjs框架提供可重用的组件。在本教程中，学习如何使用primeReact库实现在React应用程序中向用户显示敬酒/警报通知信息。

让我们开始吧!

首先，让我们使用create-react-app工具创建一个react应用程序

#create-react-app 命令创建了带有所有文件和构建管道的新应用程序。它提供了所有最新的 reactjs 和它的依赖项。

npx create-react-app primereact-toast

这将创建 primeract-toast 应用程序并自动安装所需的依赖项。

进入应用程序根文件夹，通过运行以下命令启动应用程序。

npm run start

我们必须使用npm install命令安装以下依赖项

npm install primereact --save
npm install primeicons --save
npm install react-transition-group --save

primeract是React组件UI库，它依赖于primicons。

primeicons是由primereact公司提供的图标库，你可以看到更多关于primicons的信息。

react-transition-group是一个npm库，需要动画支持。

安装完成后，你可以看到以下条目被添加到package.json中

  "dependencies": {
    "primeicons": "^4.1.0",
    "primereact": "^6.0.0",
  },

将primereact主题和样式添加到react应用中

Primereact提供了以下css文件，请在App.css中添加这些文件

App.css

@import "~primereact/resources/themes/saga-green/theme.css";
@import "~primereact/resources/primereact.min.css";
@import "~primeicons/primeicons.css";

第一个文件是主题文件，你可以把它改成其他主题。primereact css是primereact组件的最小化文件。primicons是在reactjs应用程序中包含primereact图标。

让我们首先创建一个名为ToastComponentExample.js的React组件。

这些组件被创建为无状态或功能性组件。

ToastComponentExample.js。

import React from 'react';

const ToastComponentExample = () => {
   return (
       <div>
           
       </div>
   );
};

export default ToastComponentExample;

接下来，将Toast组件导入该组件中。

 import { Toast } from 'primereact/toast';

警报通知在PrimeReact中被表示为消息对象，
消息对象有以下属性

• 严重性 - 具有不同颜色和风格的通知类型 成功 - 错误 - 信息 - 警告
• summary - 这是一个通知的标题
• 详细--通知的正文

消息对象有以下方法来显示和隐藏通知

• show()- 显示通知
• clear()- 从当前范围内删除通知对象

让我们在反应组件中使用。

添加toast容器，如下所示

<Toast ref={toastObject} position="top-left" className="cssclassname"></Toast>

这里的Toast是一个toast容器

toastObject要用ref连接到ToastContainer上，这个ref必须在typescript代码中声明。position--在页面的位置上显示通知 有效值是*右上角、左上角、左下角**、右下角*

完整的代码:

import React, { useRef } from 'react';
import { Toast } from 'primereact/toast';
import { Button } from 'primereact/button';
import '../index.css'
const ToastComponentExample = () => {
    const toast = useRef(null);
    const displaySuccess = () => {
        toast.current.show({ severity: 'success', summary: 'Successfully Done', detail: 'Successfull Content', life: 3000 });

    }
    const displayError = () => {
        toast.current.show({ severity: 'error', summary: 'Error message', detail: 'Error Content', life: 3000 });

    }
    const displayInfo = () => {
        toast.current.show({ severity: 'info', summary: 'Information summary Done', detail: 'Information Content', life: 3000 });

    }
    const displayWaring = () => {
        toast.current.show({ severity: 'warn', summary: 'warning Done', detail: 'warning Content', life: 3000 });

    }
    return (
        <div>
            <Toast ref={toast} />
            <Button label="Success" className="p-button-success" onClick={displaySuccess} />
            <Button label="Info" className="p-button-info" onClick={displayInfo} />
            <Button label="Warn" className="p-button-warning" onClick={displayWaring} />
            <Button label="Error" className="p-button-danger" onClick={displayError} />

        </div>
    );
};

export default ToastComponentExample;

输出

错误

如果你没有在 react 应用程序中安装 react-transition-group，它会给出模块未找到。在浏览器中无法解决 react-transition-group的错误。

Primereact的一些组件，如toast依赖于动画库react-transition-group，所以你必须使用npm安装来解决这个问题。

npm install react-transition-group --save