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

我正在使用谷歌的自动完成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 = '';
}

更新： 使用下面的答案，我做到了以下几点：

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'
                });
            });
        };
    }
};

内部反应组件：

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>;
}

if（google.status=='LOADED'&&google.connection==='ONLINE'）{
输入谷歌=
自动完成：
this.loadAutocomplete（el）name={`${group}.google`}id={`${group}.google`}type=“text”onFocus={this.clearSearch}/>
;
}否则{
inputGoogle=自动完成不可用
；
}

---

到目前为止一切正常。

您可以使用Navigator对象的联机方法，返回布尔值，

true

如果联机，则只需在react渲染中添加一条语句即可

render（）{
var input=navigator.onLine？：空；
返回(
{input}
)    
}

导航器。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域，但您必须确保它具有惊人的正常运行时间。

使用

navigator.onLine

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

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

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

---

更多信息

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

首先安装软件包

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.</Online>
        </div>
    );
}

从“react detect Offline”导入{Offline，Online}
常量MyComponent=（）=>{
返回(
您现在处于脱机状态。请检查您的连接。
你现在在线。
);
}

不幸的是，这在浏览器之间并不一致，也不可靠。在任何页面中尝试，在控制台中输入

navigator.onLine

。应该是

true

。关掉你的wifi。轻触控制台中的向上箭头以重复上一个命令。它仍然会说

true

。它并没有检查你的实际网络连接。它正在查看浏览器的

在线

变量，这充其量是不确定的。处理问题的方法基本上是正确的：我刚刚在Firefox上的@KevinSuttle上做了测试，并按预期工作，我在wifi打开时得到了true，在wifi关闭时得到false，我使用了向上箭头。这在safari中不起作用。你能写一个轮询示例吗？@Ankurmawaha根据软件包，浏览器支持非常全面，应该可以在safari上使用——“我们所依赖的web规范由IE 9+、Chrome 14+、Firefox 41+和safari 5+支持——占全球（98%）浏览器流量的94%。”。他们进一步规定，轮询仅适用于不支持非safari的在线事件的浏览器——“轮询仅用作不支持“在线”事件的浏览器的备用。目前，这些浏览器包括Windows上的Chrome、Windows上的Firefox和Linux上的Chrome。”。更多信息在我的答案上面的链接。

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.</Online>
        </div>
    );
}