Javascript 在react上实现react通知系统

我正在尝试实现react通知系统：但无法使其工作。我的代码：

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

---

我猜这是scope的一个问题，但不知道如何解决。

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

如果视图和操作在同一个组件中，那么在您的操作中，您需要这样调用：

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

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

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

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

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

//查看
_notificationSystem=null
_getNotificationSystemInstance（）{
返回此通知系统
}
componentDidMount（）{
this._notificationSystem=this.refs.notificationSystem；
}
render（）{
返回(
);
}
//事件组件
createEvent（e）{
e、 预防默认值（）；
this.props.notification（）.addNotification({
消息：“通知消息”，
级别：“成功”
});
this.props.closeModal（）；
}

我看到了完全相同的问题！作为旁注，构造函数中的逻辑是不正确的。它应该是

this.\u notificationSystem=nullcomponentDidMount

callback方法中设置它。我还怀疑您必须使用

ReactDOM.findDOMNode（this.refs.notificationSystem）

来获取

notificationSystem

的实例。尽管如此，它仍然不适合我。