如何将标准的反应通知系统示例应用于可流动项目

Question

我正在尝试使用这个组件https://github.com/igorprado/react-notification-system在一个标准的fluxible项目中，我正在寻找如何将示例代码改编为es6风格类的指导。

这是原始样本代码：

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')
);

这是我将其添加到可流动应用程序组件的尝试，我应该将notificationSystem对象添加到状态中吗？如果我连接到商店，使用componentDidMount总是可靠的吗？我应该如何从操作触发通知-我应该更新触发组件的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;
    }
}

Answer 1

您可以将其存储在应用程序的属性中：

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'
        });
    }

或者，如果你想要一个使用通量模式的更完整的例子：

这个答案是基于：https://github.com/igorprado/react-notification-system/issues/29#issuecomment-157219303

将触发通知的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>
}

通知操作，有一个.info()别名用于触发级别为info的通知

constructor() {
    this.generateActions('add', 'remove', 'success', 'error', 'warning', 'info');
}

（我正在使用alt生成器生成add操作、remove和一些别名）

通知存储

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组件，它将在顶级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' />;
  }

这个答案是基于：https://github.com/igorprado/react-notification-system/issues/29#issuecomment-157219303