在ReactJs中为组件创建不同的移动布局 [英] Creating Different mobile layout for a component in ReactJs

问题描述

我们如何使用ReactJs为组件(具有不同的桌面类型布局)创建完全不同的(移动类型布局). (不响应，响应是css必须注意的事情.) 该组件的布局应不同，即在此处创建一个带有桌面屏幕菜单(标题菜单)的页面，该页面将成为在小屏幕上带有徽标的导航侧栏.

How can we create a completely different (mobile type layout) for a component (having a different desktop type layout) using ReactJs. (Not Responsive , responsive is something css has to take care of.) It should be different layout for the component i.e here Creating a page with a menu(header menu) for desktop screens which becomes a navigation sidebar with logo on small screen.

推荐答案

老实说，简单的可重复使用的CSS布局可能是最好的解决方案，但是步骤是

Honestly, a simple resposive css layout may be the best solution, but the steps are to

1)如果用户在移动设备或台式机上，则在JS中进行检测.例如，此问题有一个很好的建议作为答案:检测移动浏览器

1) Detect in JS if user in on mobile or desktop. For example this question has a good suggestion as an answer: Detecting a mobile browser

2)使用它来确定您的根组件中要使用哪种布局:

2) Use it to decide in your root component that which layout to use:

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

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

这篇关于在ReactJs中为组件创建不同的移动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！