如何根据设备浏览器隐藏/显示React组件？

Question

想要在React/Nextjs/tailwind webapp中根据用户所使用的设备（例如台式机、平板电脑或移动设备）隐藏/显示组件，因为在台式机上有某些键可用，而平板电脑和移动设备上没有这些键（例如Tab键）。不想通过屏幕尺寸来实现，因为这是一个设备问题（键盘上没有Tab键），而不是屏幕尺寸问题。

最初，我考虑获取设备类型（参考自另一个StackOverflow问答），但当用户在iPad等设备上并且正在使用该浏览器的桌面版（例如桌面版Safari而不是移动版Safari）时，似乎会失败。是否有更好的方法来处理这个问题，以便能够正确检查用户所使用的设备以便能够隐藏/显示React组件？

const getDeviceType = () => {
  const ua = navigator.userAgent;
  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
    return "tablet";
  }
  if (
    /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
      ua
    )
  ) {
    return "mobile";
  }
  return "desktop";
};

- user3226932

---

你真的不应该依赖用户代理。媒体查询/断点可能会有所帮助，而且看起来TW已经解决了这个问题。 - Andy

你好！你有没有查看过 react-device-detect 包？根据他们的文档：如果你需要检测特定的浏览器类型（例如 Chrome、Safari、Internet Explorer）或特定类别的设备（例如所有 iPods），这个库可以实现。完整链接在此。 - Omar Dieh

Answer 1

在JavaScript中，你可以使用window.navigator来检测浏览器。

根据https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator提供的示例代码。

var sBrowser, sUsrAg = 
navigator.userAgent;

// The order matters here, and this may 
 report false positives for unlisted 
 browsers.

 if (sUsrAg.indexOf("Firefox") > -1) {
sBrowser = "Mozilla Firefox";
// "Mozilla/5.0 (X11; Ubuntu; Linux 
x86_64; rv:61.0) Gecko/20100101 
Firefox/61.0"
}

alert("You are using: " + sBrowser);

但是对于React，您可以使用另一个包，即npm install react-device-detect

代码示例如下：

import { browserName, browserVersion } 
from "react-device-detect"
console.log(`${browserName} 
${browserVersion}`);

检测浏览器后，您只需有条件地渲染您想要显示的内容即可。

- MH Sagar