javascript - 如何使用实用程序函数来检测操作系统和浏览器的 react ？

Question

我正在尝试使用实用程序函数来检测 react 应用程序中登录页面上的浏览器和操作系统。以下是我尝试导出到登录组件中的方法:

//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 对象在 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));
  }

最终我想将操作系统和浏览器的状态设置为导入方法返回的值。然而，目前当我在控制台记录这些时，我收到“未定义”。

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

但是如果你这样做，你就根本不需要包装函数

export const OS = getOperatingSystem;
export const currentBrowser = getBrowser

当你这样写时，你可能会问自己为什么不直接导出原始函数

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