如何根据用户的操作系统有条件地呈现 ReactJS 内容

How to conditionally render ReactJS content based of user's Operation System

我正在寻找一种解决方案来根据用户的操作系统有条件地呈现 React 内容。

例如。我有一个简单的组件,它显示键盘快捷键以与我正在使用的另一个组件进行交互。在这种情况下,WindowsLinux 的键盘快捷键旨在显示 ctrl + [action]。但是对于 MacOS 它需要显示 cmd + [action].

这是我的组件:

import React from 'react';

import { ShortcutsContainer, MetaRow } from '../../styles';

const Shortcuts = () => (
  <ShortcutsContainer>
    <h1>Keyboard Shortcuts</h1>
    <MetaRow>
      <strong>ctrl + click</strong>
      <span> to start editing value</span>
    </MetaRow>
    <MetaRow>
      <strong>ctrl + Enter</strong>
      <span> to submit changes</span>
    </MetaRow>
    <MetaRow>
      <strong>Escape</strong>
      <span> to cancel editing</span>
    </MetaRow>
  </ShortcutsContainer>
);

export default Shortcuts;

让我们从中提取 <strong>ctrl + click</strong>

我想要的是这样的:

<strong>{getUserOS() === 'MacOS' ? 'cmd' : 'ctrl'} + click</strong>

我将如何做到这一点?一直在努力寻找一种方法来获取用户的 OS.

也许我们可以使用 Platform 模块来做到这一点。

只是 var platform = require('platform'); 它并使用 platform.os 得到 OS。

window.navigator.platform

returns浏览器针对哪个平台编译

好吧,感谢@MiguelCalderón 推荐我去检查 vanilla JS 解决方案。我检查了一下,找到了适用于此用例的解决方案。

我创建了这个简单的小函数:

const cmdOrCtrl = () => (window.navigator.platform.match(/^Mac/) ? 'cmd' : 'ctrl');

然后就这样实现了:

<strong>{cmdOrCtrl()} + click</strong>

如果我答对了你的问题,你对了解用户的操作系统很感兴趣。 你可以使用这样的东西

getUserOs= () =>{
 return window.navigator.platform;
}