在 React 上实现 react-notification-system

Question

I am trying to implement the react-notification-system: https://github.com/igorprado/react-notification-system but unable to get it to work. My code:

// on the view

constructor() {
    super();
    this.state = {};
    this.state._notificationSystem = null;
    this.state = getProfileState();
}

componentDidMount() {
    TimelineStore.addChangeListener(this._onChange.bind(this));
    this._notificationSystem = this.refs.notificationSystem;
}

render () {
    <NotificationSystem ref="notificationSystem" />
}

// on the actions

createEvent(e) {
    e.preventDefault();
    this.props._notificationSystem.addNotification({
      message: 'Notification message',
      level: 'success'
    });
    this.props.closeModal();
}

I a getting the error:

Uncaught TypeError: Cannot read property 'addNotification' of undefined

I am guessing it is a problem with scope but could not figure out how to fix it.

Answer 1

I couldn't understand your example. The action mentioned is defined in the same component that you are rendering the NotificationSystem? Or are you trying to pass the instance of NotificationSystem to another component via props?

Well, if the view and action is in the same component, on your action you need to call like this:

this._notificationSystem.addNotification({
  message: 'Notification message',
  level: 'success'
});

Now, if you are trying to pass it via props to another component, you need to pass a function, like this:

// view

_notificationSystem = null

_getNotificationSystemInstance() {
  return this._notificationSystem
}

componentDidMount() {
  this._notificationSystem = this.refs.notificationSystem;
}

render() {
  return (
    <div>
      <EventComponent notification={ this._getNotificationSystemInstance } />
      <NotificationSystem ref="notificationSystem" />
    </div>
  );
}

// event component
createEvent(e) {
  e.preventDefault();
  this.props.notification().addNotification({
    message: 'Notification message',
    level: 'success'
  });
  this.props.closeModal();
}