Question

我安装了react-notification-system，它正常工作并生成通知。我正在尝试设置它，以便我有一个包含通知的全局容器，因此如果用户导航到另一个视图，通知不会消失。

使用以下

设置我的CONTAINER文件

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

               <section id="main">

                 <Menu/>

                { this.props.children }

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

                <Footer/>

              </section>

            </div>
        );
    }

我正在努力的是如何从子组件（this.props.children）引用this._notificationSystem？

可以使用容器文件中的以下内容添加通知。

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

Answer 1

基于此answer，您可以按照以下方式执行操作：

CuttedLine

容器文件中的

执行此操作：

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

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

Answer 2

您可能错过了配置文档中的这篇文章

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

实际上，在最新的React版本中，这个pratique已被弃用，你应该使用类似的东西：

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

您可以直接在组件呈现上分配此（您的组件）的_notificationSystem。

在这两种情况下，您都可以访问此变量来调用NotificationService方法，例如addNotification等。

React Global通知系统

2 个答案: