Question

我正在使用Google的自动填充API来改善表单中的地址输入。

我正在使用GoogleMapsLoader加载程序，它在加载后调度操作：

GoogleMapsLoader.onLoad(function() {
    store.dispatch(GoogleActions.loaded());
});

在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 = '';
}

loadAutocomplete方法（不确定它是否是最好的方法）：

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

UPDATE：

使用下面的答案，我做了以下事项：

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, {
                connection: 'OFFLINE'
            });
        case 'GOOGLE_ONLINE':
            return Object.assign({}, state, {
                connection: 'ONLINE'
            });
        default:
            return state;
    }
};

const GoogleActions = {
    loaded: () => {
        return (dispatch) => {
            dispatch({
                type: 'GOOGLE_LOADED',
            });
        };
    },
    onOnline: () => {
        return (dispatch) => {
            window.addEventListener('online', function() {
                dispatch({
                    type: 'GOOGLE_ONLINE'
                });
            });
        };
    },
    onOffline: () => {
        return (dispatch) => {
            window.addEventListener('offline', function() {
                dispatch({
                    type: 'GOOGLE_OFFLINE'
                });
            });
        };
    }
};

Inside React组件：

if (google.status === 'LOADED' && google.connection === 'ONLINE') {
    inputGoogle = <div>
        <label htmlFor={`${group}.google`}>Auto Complete:</label>
        <input ref={(el) => this.loadAutocomplete(el)} name={`${group}.google`} id={`${group}.google`} type="text" onFocus={this.clearSearch}/>
    </div>;
} else {
    inputGoogle = <p>Auto Complete not available</p>;
}

到目前为止工作。

Answer 1

你可以使用Navigator对象的onLine方法，如果在线则返回一个布尔值true，然后在你的反应渲染中添加一个语句。

https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine

render(){
var input = navigator.onLine ? <YOUR_FORM_COMPONENT> : null;
    return(
    <div>
        {input}
    </div>
    )    
}

Answer 2

我一直在使用react-detect-offline来处理显示特定于在线/离线的内容，它处理不支持轮询在线事件的较旧的浏览器，您可以在选项中指定轮询URL。

https://github.com/chrisbolin/react-detect-offline

首先安装软件包

npm install react-detect-offline

然后在组件中执行类似的操作

import { Offline, Online } from "react-detect-offline"

const MyComponent = () => {
    return (
        <div>
            <Offline>You're offline right now. Check your connection.</Offline>
            <Online>You're online right now.</Offline>
        </div>
    );
}

Answer 3

navigator.onLine会返回状态，无论它是 在线还是离线 ，但不会检查 互联网连接 是否存在。向@StackOverMySoul添加更多内容。要摆脱这种情况，请参考以下示例。

var condition = navigator.onLine ? 'online' : 'offline'; if (condition === 'online') { console.log('ONLINE'); fetch('https://www.google.com/', { // Check for internet connectivity mode: 'no-cors', }) .then(() => { console.log('CONNECTED TO INTERNET'); }).catch(() => { console.log('INTERNET CONNECTIVITY ISSUE'); } ) }else{ console.log('OFFLINE') }

为什么选择google.com？

将get请求发送到google.com而不是任何随机平台的原因是因为它具有良好的正常运行时间。这里的想法是始终将请求发送到始终在线的服务。如果您有服务器，则可以创建一条专用路由来替换google.com域，但是必须确保它具有惊人的正常运行时间。

Answer 4

使用navigator.onLine检查网络连接。如果网络连接可用，则返回true，否则返回false。

还尝试使用navigator.connection来验证网络连接状态。

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    if (connection) {
      if (connection.effectiveType === 'slow-2g')
        preloadVideo = false;
    }

更多Network Information API

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

UPDATE：

4 个答案: