Question

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

EG。我有一个简单的组件，显示键盘快捷键，以便与我正在使用的另一个组件进行交互。在这种情况下，Windows和Linux的键盘快捷键旨在显示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>

我将如何实现这一目标？一直在努力寻找获得用户操作系统的方法。

Answer 1

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

只需var platform = require('platform');，然后使用platform.os获取操作系统。

Answer 2

window.navigator.platform

返回编译浏览器的平台

Answer 3

好的，感谢@MiguelCalderón建议我去查看vanilla JS Solution。我检查了一下，得到了一个适用于这个用例的解决方案。

我创造了这个简单的小功能：

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

然后按如下方式实施：

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

Answer 4

如果我正确地提出了您的问题，您就会对了解用户的操作系统感兴趣。你可以使用这样的东西

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

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

4 个答案: