如何在 ReactJS 中添加推送通知功能？

在本文中，我们将学习如何使用 npm 包React-push-notification 在 React 应用程序中添加推送通知功能。

React-push-notification 的特点：

• 轻量级模块
• 非常容易使用
• 在 TypeScript 中并编译为 JavaScript

先决条件：

• react.js的介绍和安装
• 反应钩子使用状态

创建 React 应用程序和模块安装：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app project

第2步：创建项目文件夹（即项目）后，使用以下命令移动到该文件夹：

cd project

第 3 步：现在使用以下命令安装依赖项 react-push-notification ：

npm i react-push-notification

项目结构：它看起来像这样。

示例：我们需要在其他组件的顶部添加从模块导入的通知。这充当通知的容器，然后我们需要从“react-push-notification”导入 addNotification 方法，该方法作用于许多更改我们的通知的参数，如标题、颜色等。

文件名：App.js：我们正在创建一个名为推送通知的简单按钮，它会触发 onclick函数buttonOnClick，它在这里调用方法 addNotification 我已将标题添加为“警告”，并将本机添加为 true。 native 选项默认为 false，此 native 属性将通知转换为原生 Web 通知。

应用程序.js

import addNotification from 'react-push-notification';
import { Notifications } from 'react-push-notification';
function App() {
  function buttonOnClick (){
    addNotification({
      title: 'Warning',
      native:true         
    })
  };
  return (
    

      
      
Hey Geek!
      
         Push Notification
      
    
  );
}

export default App;