我正在寻找一种解决方案来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>
我将如何做到这一点?一直在努力寻找获取用户操作系统的方法。