Question

我正在尝试实施react-notification-system：https://github.com/igorprado/react-notification-system但无法让它工作。我的代码：

// 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();
}

我得到了错误：

Uncaught TypeError: Cannot read property 'addNotification' of undefined

我猜这是范围问题，但无法弄清楚如何修复它。

Answer 1

我无法理解你的例子。提到的操作是在您呈现NotificationSystem的同一组件中定义的？或者您是否尝试通过道具将NotificationSystem实例传递给另一个组件？

好吧，如果视图和操作位于同一个组件中，那么您需要按照以下方式调用：

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

现在，如果您尝试通过props将其传递给另一个组件，则需要传递一个函数，如下所示：

// 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();
}

在React上实现react-notification-system

1 个答案: