如何使标准反应通知系统示例适应可变项目

Question

我正在尝试在一个标准的可变项目中使用此组件 https://github.com/igorprado/react-notification-system，并且正在寻找有关如何将示例代码调整为 es6 样式的指导 class。

原始示例代码如下：

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

（我正在使用替代生成器生成 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' });
  }

将在顶层呈现 Notification 组件的 React 组件 HTML 元素

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

如何使标准反应通知系统示例适应可变项目

How to adapt the standard react-notification-system example to a fluxible project

reactjs

reactjs-flux

fluxible