React useNavigatorOnLine钩子
检查客户端是否在线或离线。
- 创建一个函数
getOnLineStatus
,使用Navigator.onLine
Web API获取客户端的在线状态。 - 使用
useState()
钩子创建一个适当的状态变量status
和setter。 - 使用
useEffect()
钩子添加适当的事件监听器,更新状态,并在卸载时清除这些监听器。 - 最后返回
status
状态变量。
const getOnLineStatus = () =>
typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
? navigator.onLine
: true;
const useNavigatorOnLine = () => {
const [status, setStatus] = React.useState(getOnLineStatus());
const setOnline = () => setStatus(true);
const setOffline = () => setStatus(false);
React.useEffect(() => {
window.addEventListener('online', setOnline);
window.addEventListener('offline', setOffline);
return () => {
window.removeEventListener('online', setOnline);
window.removeEventListener('offline', setOffline);
};
}, []);
return status;
};
const StatusIndicator = () => {
const isOnline = useNavigatorOnLine();
```jsx
返回 <span>你现在{isOnline ? '在线' : '离线'}。</span>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<StatusIndicator />
);