Javascript 如何从服务工作者对象调用react类的函数？

我正试图与我自己的服务人员在react web中进行非侵入性更新。我想在网站有新的更新时显示通知。我正在使用一个组件来处理服务工作者逻辑。问题是我不知道如何在服务工作者的事件侦听器中调用我的类的函数，其中引用了服务工作者本身。有什么建议吗？下面是处理服务人员的类：

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

export class ServiceWorker extends React.Component<RouteComponentProps<{}>> {
    constructor() {
        super();
    }

    registerServiceWorker() {
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/ServiceWorker.js').then(reg => {
                    console.log('SW registered: ', reg);
                    if (!navigator.serviceWorker.controller) {
                        return;
                    }
                    if (reg.waiting) {
                        console.log("update ready1");
                        //Can call updateAlert() here, because still using the same object
                        this.updateAlert();
                        return;
                    }

                    if (reg.installing) {
                        reg.installing.addEventListener('statechange', () => {
                            if (reg.installing.state == 'installed') {
                                console.log("update ready2");
                                //Can't call here
                                //this.updateAlert();
                            }
                        });
                        return;
                    }

                    reg.addEventListener('updatefound', function () {
                        reg.installing.addEventListener('statechange', () => {
                            if (reg.installing) {
                                if (reg.installing.state == 'installed') {
                                    console.log("update ready3");
                                    //or here
                                    //this.updateAlert();
                                }
                            }
                            if (reg.waiting) {
                                if (reg.waiting.state == 'installed') {
                                    console.log("update ready4");
                                    //or here
                                    //this.updateAlert();
                                }
                            }
                        });
                    })
                }).catch(registrationError => {
                    console.log('SW registration failed: ', registrationError);
                });
            });
        }
    }

    updateAlert() {
        console.log("success");
    }

    public render() {
        this.registerServiceWorker();
        return null;
    }
}

import*as React from'React'；
从“react router”导入{RouteComponentProps}；
导出类ServiceWorker扩展React.Component{
构造函数（）{
超级（）；
}
registerServiceWorker（）{
if（导航器中的“serviceWorker”）{
window.addEventListener（'load'，（）=>{
navigator.serviceWorker.register（'/serviceWorker.js'）。然后（reg=>{
console.log（'SW registed:'，reg）；
if（！navigator.serviceWorker.controller）{
返回；
}
如果（注册等待）{
console.log（“updateready1”）；
//可以在此处调用updateAlert（），因为仍然使用相同的对象
this.updateAlert（）；
返回；
}
如果（注册安装）{
注册安装.addEventListener（'statechange'，（）=>{
如果（reg.installing.state=='installed'）{
console.log（“更新ready2”）；
//我不能在这里打电话
//this.updateAlert（）；
}
});
返回；
}
reg.addEventListener（'updatefound'，函数（）{
注册安装.addEventListener（'statechange'，（）=>{
如果（注册安装）{
如果（reg.installing.state=='installed'）{
console.log（“更新就绪3”）；
//还是在这里
//this.updateAlert（）；
}
}
如果（注册等待）{
如果（reg.waiting.state==“已安装”）{
console.log（“更新就绪4”）；
//还是在这里
//this.updateAlert（）；
}
}
});
})
}).catch（注册错误=>{
console.log（'软件注册失败：'，注册错误）；
});
});
}
}
updateAlert（）{
控制台日志（“成功”）；
}
公共渲染（）{
这个.registerServiceWorker（）；
返回null；
}
}

您可能可以尝试使用arrow函数来使用类的作用域：

registerServiceWorker=（）=>{…}

顺便说一下，调用

this.registerServiceWorker（）可能不是一个好主意，请尝试在
componentDidMount
中调用它更改为箭头函数（也需要更改事件侦听器函数）完成了此操作，谢谢。另外，是的，调用
componentDidMount
会更明智。