英文:
How add notifications in react js
问题
如何在React JS的PWA中添加带有操作按钮的通知？给一些想法，我是React JS的新手。
我正在尝试在我的渐进式Web应用中使用React JS添加通知，但它只是显示弹出消息，而不提供与移动应用程序类似的通知行为。
英文:
how to add notification with action buttons in pwa of react js give some idea i am new to react js
I am trying to add notifications in my progressive web app using react js but it simply gives toast message it does not gives notification behavior just like mobile application gives.
答案1
得分: 1
你可以使用react-notifications库来为你的Web应用添加通知。以下是文档和npm包的链接。
这里是检查通知的示例代码：
import React from 'react';
import {
NotificationContainer,
NotificationManager,
} from 'react-notifications';
class Notifications extends React.Component {
createNotification = (type) => {
return () => {
switch (type) {
case 'info':
NotificationManager.info('信息消息');
break;
case 'success':
NotificationManager.success('成功消息', '标题在这里');
break;
case 'warning':
NotificationManager.warning(
'警告消息',
'3000毫秒后关闭',
3000
);
break;
case 'error':
NotificationManager.error('错误消息', '点击我！', 5000, () => {
alert('回调');
});
break;
}
};
};
render() {
return (
<div>
<button
className="btn btn-info"
onClick={this.createNotification('info')}
>
信息
</button>
<hr />
<button
className="btn btn-success"
onClick={this.createNotification('success')}
>
成功
</button>
<hr />
<button
className="btn btn-warning"
onClick={this.createNotification('warning')}
>
警告
</button>
<hr />
<button
className="btn btn-danger"
onClick={this.createNotification('error')}
>
错误
</button>
<NotificationContainer />
</div>
);
}
}
export default Notifications;
英文:
you can use the react-notifications library for adding notifications to your web app. Here is the link for the documentation and the npm package.
Here is some example code for checking the notifcations.
import React from 'react';
import {
NotificationContainer,
NotificationManager,
} from 'react-notifications';
class Notifications extends React.Component {
createNotification = (type) => {
return () => {
switch (type) {
case 'info':
NotificationManager.info('Info message');
break;
case 'success':
NotificationManager.success('Success message', 'Title here');
break;
case 'warning':
NotificationManager.warning(
'Warning message',
'Close after 3000ms',
3000
);
break;
case 'error':
NotificationManager.error('Error message', 'Click me!', 5000, () => {
alert('callback');
});
break;
}
};
};
render() {
return (
<div>
<button
className="btn btn-info"
onClick={this.createNotification('info')}
>
Info
</button>
<hr />
<button
className="btn btn-success"
onClick={this.createNotification('success')}
>
Success
</button>
<hr />
<button
className="btn btn-warning"
onClick={this.createNotification('warning')}
>
Warning
</button>
<hr />
<button
className="btn btn-danger"
onClick={this.createNotification('error')}
>
Error
</button>
<NotificationContainer />
</div>
);
}
}
export default Notifications;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论