React Глобальная система уведомления

Question

Я установил react-notification-system, который отлично работает и производит уведомления. Я пытаюсь настроить его таким образом, чтобы у меня был глобальный контейнер, который содержит уведомления, поэтому, если пользователь переходит к другому виду, уведомление не исчезает.

Мой файл КОНТЕЙНЕР настроен с использованием следующих

render: function() { 
     return (
      <div> 
       <Header/> 

       <section id="main"> 

       <Menu/> 

       { this.props.children } 

       <NotificationSystem id="notificationSystem" ref="notificationSystem" /> 

       <Footer/> 

       </section> 

      </div> 
     ); 
    } 

То, что я борюсь с это как ссылаться this._notificationSystem из дочерних компонентов (this.props.children)?

Уведомление может быть добавлено с использованием следующего из файла контейнера.

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

Answer 1

на основе этого answer вы можете сделать что-то вдоль линий:

createChildrenWithProp: function() { 
    const childrenWithProps = React.Children.map(this.props.children, 
    (child) => React.cloneElement(child, { 
     addNotification: this._notificationSystem.addNotification.bind(this) 
    }) 
    ); 

    return <div>{childrenWithProps}</div> 
} 

в файле-контейнере сделать это:

{ this.createChildrenWithProp() } 

Answer 2

Вы, возможно, пропустили эту часть из документации конфигурации

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

На самом деле, в последней версии React это Практической является устаревшим, и вы должны использовать что-то вроде:

<NotificationSystem ref={(ns)=>{ this._notificationSystem = ns}} /> 

где вы назначая _notificationSystem этого (компонента) непосредственно на оказание компонентов.

В обоих случаях вы можете получить доступ к этой переменной, чтобы вызвать методы NotificationService, такие как addNotification и т. Д.