小编The*_*ion的帖子

检测React Redux应用程序中的网络连接 - 如果脱机,则隐藏用户的组件

我正在使用谷歌的自动完成API来改善我的表单中的地址输入.

我正在使用GoogleMapsLoader加载器,它在加载后调度操作:

GoogleMapsLoader.onLoad(function() {
    store.dispatch(GoogleActions.loaded());
});
Run Code Online (Sandbox Code Playgroud)

在React组件中,我有以下输入:

if (google.status === 'LOADED') {
    inputGoogle = <div>
        <label htmlFor={`${group}.google`}>Auto Complete:</label>
        <input ref={(el) => this.loadAutocomplete(el)} type="text" />
    </div>;
} else {
    inputGoogle = '';
}
Run Code Online (Sandbox Code Playgroud)

loadAutocomplete方法(不确定它是否是最好的方法):

loadAutocomplete(ref) {
    if (!this.autocomplete) {
        this.search = ref;
        this.autocomplete = new google.maps.places.Autocomplete(ref);
        this.autocomplete.addListener('place_changed', this.onSelected);
    }
},
Run Code Online (Sandbox Code Playgroud)

更新:

使用下面的答案,我做了以下:

const GoogleReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'GOOGLE_LOADED':
            return Object.assign({}, state, {
                status: 'LOADED',
                connection: 'ONLINE'
            });
        case 'GOOGLE_OFFLINE':
            return Object.assign({}, state, { …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux react-redux

9
推荐指数
3
解决办法
9001
查看次数

在不同的文件夹中注册Service Worker

我想弄清楚如何正确注册服务工作者,在开发中一切正常,我打电话给服务工作者:

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('./sw.js').then(function(reg) {
        if (reg.waiting) {
            reg.waiting.postMessage({ action: 'skipWaiting' });
            return;
        }

        reg.addEventListener('updatefound', function() {
            trackInstalling(reg.installing);
        });

        var refreshing;
        navigator.serviceWorker.addEventListener('controllerchange', function() {
            if (refreshing) return;
            window.location.reload();
            refreshing = true;
        });

    });

}
Run Code Online (Sandbox Code Playgroud)

缓存列表如下:

var urlsToCache = [
    '/',
    '/index.html',
    '/css/app.min.css',
    '/js/app.min.js',
    '/js/library.min.js',
    '/views/line.html',
    '/views/start.html',
    '/views/station.html',
    '/views/timetable.html'
];
Run Code Online (Sandbox Code Playgroud)

这只是我为Udacity所做的一个项目,所以页面不会拥有自己的域名.但是我仍然希望将最终版本保留在文件夹/ train /中,但是服务工作者在主域下注册,因此缓存了错误的文件.

如果我添加'train/index.html'服务工作者正在寻找'train/train/index.html'.如果尝试在文件夹"train"中注册服务工作者,也会发生同样的情况...

我该怎么做才能使项目的在线版本正常工作?

javascript google-chrome service-worker

5
推荐指数
1
解决办法
2543
查看次数