如何根据用户的操作系统有条件地呈现ReactJS内容
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何根据用户的操作系统有条件地呈现ReactJS内容相关的知识,希望对你有一定的参考价值。
我正在寻找一种解决方案,根据用户的操作系统有条件地呈现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>
我怎么做到这一点?一直在努力寻找获得用户操作系统的方法。
答案
也许我们可以使用Platform模块来做到这一点。
只需var platform = require('platform');
它并使用platform.os
来获取操作系统。
另一答案
window.navigator.platform
返回编译浏览器的平台
另一答案
好的,感谢@MiguelCalderón建议我去查看vanilla JS解决方案。我检查了一下,得到了一个适用于这个用例的解决方案。
我创建了这个简单的小函数:
const cmdOrCtrl = () => (window.navigator.platform.match(/^Mac/) ? 'cmd' : 'ctrl');
然后按如下方式实现:
<strong>{cmdOrCtrl()} + click</strong>
另一答案
如果我正确地得到您的问题,您就会对了解用户的操作系统感兴趣。你可以使用这样的东西
getUserOs= () =>{
return window.navigator.platform;
}
以上是关于如何根据用户的操作系统有条件地呈现ReactJS内容的主要内容,如果未能解决你的问题,请参考以下文章
ReactJS 7 - 如何根据其值有条件地仅更改表格单元格(而不是行)的背景颜色?