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

Posted 2023-02-22

【中文标题】如何根据用户的操作系统有条件地渲染 ReactJS 内容

【英文标题】：How to conditionally render ReactJS content based of user's Operation System

【发布时间】：2018-08-08 00:59:35

【问题描述】：

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

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

我将如何做到这一点？一直在努力寻找获取用户操作系统的方法。

【问题讨论】：

所以，真正的问题似乎是：如何使用 javascript 检测用户操作系统？你可以在这里查看一些答案：***.com/questions/9514179/…

是的，你是对的@MiguelCalderón，谢谢！

【参考方案1】：

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

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

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

然后只是实现如下：

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

【参考方案2】：

window.navigator.platform

返回浏览器编译的平台

【参考方案3】：

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

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

【参考方案4】：

如果我正确地回答了您的问题，那么您对了解用户的操作系统很感兴趣。 你可以使用这样的东西

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