在ReactJs

Question

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

Answer 1

老实说，简单的resposive 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 /> )
  }
}

Answer 2

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