javascript - 创建自定义挂钩来检测浏览器
问题描述
我正在尝试创建一个自定义挂钩,它将返回用户的浏览器名称。这是我第一次尝试创建自定义挂钩来检测浏览器。我正在使用浏览器名称设置钩子中的状态并返回我认为会反映在我使用钩子的组件中的状态值。但它只返回文本的第一个字母。
这里有人可以知道我在这里做错了什么。
下面是我检测浏览器名称的代码
使用检测浏览器()
import React from "react";
export default function useDetectBrowser() {
var sBrowser, sUsrAg = navigator.userAgent;
const [ browserName, setBrowserName ] = React.useState("");
React.useEffect(() => {
if (sUsrAg.indexOf("Firefox") > -1) {
sBrowser = "Mozilla Firefox";
// "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
} else if (sUsrAg.indexOf("SamsungBrowser") > -1) {
sBrowser = "Samsung Internet";
// "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
sBrowser = "Opera";
// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
} else if (sUsrAg.indexOf("Trident") > -1) {
sBrowser = "Microsoft Internet Explorer";
// "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
} else if (sUsrAg.indexOf("Edge") > -1) {
sBrowser = "Microsoft Edge";
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
} else if (sUsrAg.indexOf("Chrome") > -1) {
sBrowser = "Google Chrome or Chromium";
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
} else if (sUsrAg.indexOf("Safari") > -1) {
sBrowser = "Apple Safari";
// "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
} else {
sBrowser = "unknown";
}
setBrowserName(sBrowser);
}, []);
return browserName
}
// 用法:
const [ browserName, setBrowserName ] = useDetectBrowser();
console.log(browserName);
解决方案
你的钩子看起来不错。唯一的错误是使用了钩子——返回类型是字符串,所以目前你的赋值类似于:
const [ browserName /* "C" */, setBrowserName /* "h" */ ] = 'Chrome';
提取第一个字母,修复只需更改为
const browserName = useDetectBrowser();
推荐阅读
- c# - Cosmos DB Newtonsoft 反序列化问题
- python - Python - 函数返回值
- c# - 如何注册一个ajaxcontrolkit?
- algolia - Algolia Instantsearch:自定义排序细化列表
- delphi - 模拟按键但仅限于特定窗口?
- azure - Azure Logic Apps 未在 Google 工作表中为每个实例插入一行
- laravel-5 - Laravel Api 资源控制器 json 格式
- python - 在python 3.6中将输入添加到csv中的现有行
- docker - Docker Compose File 无法获取 .env 变量
- java - 如何在没有 Web 服务的情况下直接从 android 更新我的 ms sql server 数据库(RESTFULapi)