在 ReactJs 中为组件创建不同的移动布局答案

【问题标题】：Creating Different mobile layout for a component in ReactJs在 ReactJs 中为组件创建不同的移动布局
【发布时间】：2017-01-05 06:51:52
【问题描述】：

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

【问题讨论】：

标签： reactjs mobile layout react-redux

【解决方案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 /> )
  }
}

【讨论】：

【解决方案2】：

结帐react-responsive，您可以使用媒体查询根据设备大小呈现不同的组件。

【讨论】：