[英]How to adapt the standard react-notification-system example to a fluxible project
I'm trying to use this component https://github.com/igorprado/react-notification-system in a standard fluxible project and am looking for guidance on how to adapt the sample code into an es6 style class. 我正在尝试在标准的易变项目中使用此组件https://github.com/igorprado/react-notification-system ,并正在寻找有关如何将示例代码改编为es6样式类的指南。
Here's the original sample code: 这是原始的示例代码:
var React = require('react');
var ReactDOM = require('react-dom');
var NotificationSystem = require('react-notification-system');
var MyComponent = React.createClass({
_notificationSystem: null,
_addNotification: function(event) {
event.preventDefault();
this._notificationSystem.addNotification({
message: 'Notification message',
level: 'success'
});
},
componentDidMount: function() {
this._notificationSystem = this.refs.notificationSystem;
},
render: function() {
return (
<div>
<button onClick={this._addNotification}>Add notification</button>
<NotificationSystem ref="notificationSystem" />
</div>
);
}
});
ReactDOM.render(
React.createElement(MyComponent),
document.getElementById('app')
);
And here's my attempt to add it to a fluxible application component, should I add the notificationSystem object into state? 这是我尝试将其添加到易变的应用程序组件中,是否应该将NotificationSystem对象添加到状态中? Is using componentDidMount always reliable if I'm connecting to stores?
如果我要连接商店,使用componentDidMount是否始终可靠? How should I trigger the notification from an action - should I update a notificationStore that triggers the component or act on the component directly somehow from the action itself?
我应该如何从动作中触发通知-我应该更新从动作本身以某种方式直接触发组件或对组件进行动作的NotificationStore吗?
class Application extends React.Component {
//constructor(props) {
// super(props);
// this.state = {
// notificationSystem: this.refs.notificationSystem
// };
//}
addNotification(event) {
event.preventDefault();
this.notificationSystem.addNotification({
message: 'Notification message',
level: 'success'
});
}
render() {
var Handler = this.props.currentRoute.get('handler');
return (
<div>
<Nav currentRoute={this.props.currentRoute} links={pages} />
<div className="main">
<Handler />
</div>
<NotificationSystem ref="notificationSystem" />
</div>
);
}
componentDidMount() {
this.state.notificationSystem = this.refs.notificationSystem;
}
componentDidUpdate(prevProps, prevState) {
const newProps = this.props;
if (newProps.pageTitle === prevProps.pageTitle) {
return;
}
document.title = newProps.pageTitle;
}
}
You can store it on a property of your Application: 您可以将其存储在应用程序的属性中:
class Application extends React.Component {
//constructor(props) {
// super(props);
// this.state = {
// notificationSystem: this.refs.notificationSystem
// };
//}
notificationSystem = null;
componentDidMount() {
this.notificationSystem = this.refs.notificationSystem;
}
addNotification(event) {
event.preventDefault();
this.notificationSystem.addNotification({
message: 'Notification message',
level: 'success'
});
}
Or if you want a more complete example using flux pattern: 或者,如果您想要使用通量模式的更完整示例:
This answer was based on: https://github.com/igorprado/react-notification-system/issues/29#issuecomment-157219303 该答案基于: https : //github.com/igorprado/react-notification-system/issues/29#issuecomment-157219303
React component that will trigger the notification: React组件将触发通知:
_saveFileStart() {
this.props.flux.getActions('notification').info({
title: 'Saving file',
message: 'Please wait until your file is saved...',
position: 'tc',
autoDismiss: 0,
dismissible: false
});
}
...
render() {
<button onClick={ this._saveFileStart.bind(this) }>Save file</button>
}
Notification actions, there is a .info()
alias to trigger notifications with level info
通知操作,有一个
.info()
别名可触发带有级别info
通知
constructor() {
this.generateActions('add', 'remove', 'success', 'error', 'warning', 'info');
}
(I'm using the alt generator to generate the add
action, remove
and some aliases) (我正在使用alt生成器生成
add
操作, remove
和一些别名)
Notification store 通知店
constructor() {
this.bindActions(this.alt.getActions('notification'));
this.state = {
notification: null,
intent: null
};
}
...
onInfo(notification) {
return this._add(notification, 'info');
}
...
_add(notification, level) {
if (!notification) return false;
if (level) notification.level = level;
return this.setState({ notification, intent: 'add' });
}
React component that will render the Notification component on a top level HTML element React组件,它将在顶级HTML元素上呈现Notification组件
componentDidMount() {
const { flux } = this.props;
flux.getStore('notification').listen(this._handleNotificationChange);
}
...
_handleNotificationChange = ({ notification, intent }) => {
if (intent === 'add') {
this.refs.notifications.addNotification(notification);
}
};
...
render() {
return <ReactNotificationSystem ref='notifications' />;
}
This answer was based on: https://github.com/igorprado/react-notification-system/issues/29#issuecomment-157219303 该答案基于: https : //github.com/igorprado/react-notification-system/issues/29#issuecomment-157219303
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.