如何在React本地组件周围传递全局对象?

我正在尝试在我的React原生应用程序中设置一个消息传递模块,该模块应该从服务中获取信息,并以不同的方式将其呈现在不同的组件中。有点像这里的收件箱消息:你收到一条消息,在标题组件中你会看到带有红点的收件箱和新消息的数量。如果单击它,将转到另一个完全呈现消息的组件。

现在,我创建了两个组件来以这两种不同的方式呈现收件箱。但是当我尝试将它们链接到处理通知的类时,我在components类中发现错误,称该对象未定义。

我有这样的想法:

存储新消息的类

class Notifications {
    constructor() {
        this.notifications = [];
    }

    receiveNotification(notif) {
        this.notifications.push(notif);
    }
}

let notifications = new Notifications();

export { notifications };

处理来自服务的新消息的类

import framework from 'framework'; // this is the framework I use to communicate with the service
import Notifications from './Notifications.js';

export class PushNotificator extends Component {
  constructor(props) {
    super(props);
    this.state = {
      token: ""
    }
  }

  componentDidMount() {
    framework.requestPermissions()
    .then(() => console.log('granted'))
    .catch(() => console.log('notification permission rejected'));


    framework.getToken().then(token => {
      console.log("TOKEN (getToken)", token);
      this.setState({token: token});
    });

    this.notificationListener = framework.on(frameworkEvent.Notification, notif => {
      console.log("Notification", notif);
      this.showLocalNotification(notif);
    })
  }

  showLocalNotification(notif) {
    Notifications.notifications.push(notif); // this fails because Notifications is undefined
    framework.presentLocalNotification({
      title: notif.title,
      body: notif.body,
      priority: "high",
      click_action: notif.click_action,
      show_in_foreground: true,
      local: true
    });
  }

  componentWillUnmount() {
    this.notificationListener.remove();
  }


  render() {
    return null;
  }
}

标题收件箱组件的相关部分

import Notifications from './Notifications.js' //assume the paths are correct 
import {PushNotificator} from './PushNotificator.js'

export class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: true,
            notifications: Notifications.notifications.find(notif => notif.seen).length
        };

        this.closeActivityIndicator = () => setTimeout(() => {
            this.setState({ loading: false });
        }, 2000);
    }

...
render() {
    <PushNotificator />
    ...
}

一旦调用构造函数,程序就会失败,因为通知未定义。但为什么它没有定义?我可以不这样用吗?

谢谢