如何使用實用程序 function 來檢測操作系統和瀏覽器的反應？

Question

我正在嘗試使用實用程序 function 來檢測反應應用程序登錄頁面上的瀏覽器和操作系統。 這是我嘗試導出到登錄組件的方法：

//utils/platform.js

function getOperatingSystem(window) {
  let operatingSystem = 'Not known';
  if (window.navigator.appVersion.indexOf('Win') !== -1) { operatingSystem = 'Windows OS'; }
  if (window.navigator.appVersion.indexOf('Mac') !== -1) { operatingSystem = 'MacOS'; }
  if (window.navigator.appVersion.indexOf('X11') !== -1) { operatingSystem = 'UNIX OS'; }
  if (window.navigator.appVersion.indexOf('Linux') !== -1) { operatingSystem = 'Linux OS'; }

  return operatingSystem;
}

function getBrowser(window) {
  let currentBrowser = 'Not known';
  if (window.navigator.userAgent.indexOf('Chrome') !== -1) { currentBrowser = 'Google Chrome'; }
  else if (window.navigator.userAgent.indexOf('Firefox') !== -1) { currentBrowser = 'Mozilla Firefox'; }
  else if (window.navigator.userAgent.indexOf('MSIE') !== -1) { currentBrowser = 'Internet Exployer'; }
  else if (window.navigator.userAgent.indexOf('Edge') !== -1) { currentBrowser = 'Edge'; }
  else if (window.navigator.userAgent.indexOf('Safari') !== -1) { currentBrowser = 'Safari'; }
  else if (window.navigator.userAgent.indexOf('Opera') !== -1) { currentBrowser = 'Opera'; }
  else if (window.navigator.userAgent.indexOf('Opera') !== -1) { currentBrowser = 'YaBrowser'; }
  else { console.log('Others'); }

  return currentBrowser;
}

export const OS = (window) => { getOperatingSystem(window); };
export const currentBrowser = (window) => { getBrowser(window); };

window object 在 platform.js 文件中不可用，因此我嘗試將其作為參數添加到登錄文件中。 下面是登錄文件：

import { OS, currentBrowser } from '../../../utils/platform';

class Login extends BasePage {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      OS: '',
      browser: '',
    };
  }

componentDidMount() {
    this.checkNoSession();
    super.componentDidMount();
    console.log(OS(window));
    console.log(currentBrowser(window));
  }

最終我想將操作系統和瀏覽器的 state 設置為導入方法返回的值。 但是，目前當我在控制台記錄這些時，我收到了“未定義”。

Answer 1

這是因為您的函數沒有返回任何內容。

export const OS = (window) => { 
  return getOperatingSystem(window); // <-- missing return
};
export const currentBrowser = (window) => { 
  return getBrowser(window); // <-- missing return
};

或者您可以通過刪除{}隱式返回

export const OS = (window) => getOperatingSystem(window);
export const currentBrowser = (window) => getBrowser(window);

但如果你這樣做，你根本不需要包裝器 function

export const OS = getOperatingSystem;
export const currentBrowser = getBrowser

當你這樣寫時，你可能會問自己為什么不直接導出原始函數

export function getOperatingSystem (window) { ... }
export function getBrowser (window) { ... }

Answer 2

您可以使用導航器 object

例子：

getOs = () => {
   const os = ['Windows', 'Linux', 'Mac']; // add your OS values
   return os.find(v=>navigator.appVersion.indexOf(v) >= 0);
}

Answer 3

對於 TypeScript 我不得不使用修改版的 Zouari 答案：

const getOs = () => {
const os = ['Windows', 'Mac']; // add your OS values
return os.find(v => ((global as any).window?.navigator.platform.indexOf(v) >= 0));

}