reactjs - 在 ReactJs 中为组件创建不同的移动布局

Question

我们如何使用 ReactJs 为组件(具有不同的桌面类型布局)创建完全不同的(移动类型布局)。(不是 Responsive ，响应式是 css 必须处理的事情。)组件应该有不同的布局，即这里为桌面屏幕创建一个带有菜单(标题菜单)的页面，该页面成为小屏幕上带有 Logo 的导航侧边栏。

Answer 1

老实说，简单的响应式 CSS 布局可能是最好的解决方案，但步骤是

1) 在 JS 中检测用户是否在移动设备或桌面设备上。例如，这个问题有一个很好的建议作为答案:Detecting a mobile browser

2) 使用它来决定在根组件中使用哪种布局:

function isMobile() {
  // some js way to detect if user is on a mobile device
}

class Root extends Component {
  render() {
    return isMobile() ? ( <MobileLayout /> ) : ( <DesktopLayout /> )
  }
}