React 应用程序上的响应式布局

Posted 2023-02-22

【中文标题】React 应用程序上的响应式布局

【英文标题】：responsive layout on React application

【发布时间】：2019-07-25 16:11:03

【问题描述】：

任务是根据设备宽度显示不同的组件；

我想出了两种变体：

编写一个 React 组件，它将在每个宽度（sm、md、xl）上采用多个组件。它会自动检查设备宽度并根据宽度只渲染一个组件。 (example)

<DeviceChecker>
    <Desktop>
        <List/>
    </Desktop>
    <Mobile>
        <Carousel/>
    </Mobile>
</DeviceChecker>

我不喜欢在这种方法中检查窗口调整大小事件的宽度。

在 React 中编写这两个组件，但使用 CSS 媒体查询显示或隐藏每个组件，如下所示：

<div>
    <Carousel className="sm" />
    <List className="md" />
</div>

在这种情况下我不喜欢的是 React 实际上会渲染这两个组件，但其中一个会被简单隐藏

我知道如何实现这两种变体，但问题是 哪一种是为 React 应用程序编写响应式布局的正确方法？

【问题讨论】：

检查github.com/contra/react-responsive

【参考方案1】：

 @media only screen and (min-width: 768px) 
  section.dashboard .slick-list .slick-track 
    display: flex;
  
  section.dashboard .slick-list .slide 
    opacity: 1;
  
  header .wrapper .article h1 span.arrow 
    display:none;
  

  header .wrapper .article .description 
    max-height: 300px
  
 

@media only screen and (min-width: 1024px) 

  .container header .wrapper 
    text-align:left;
    margin-left:5%;
    width:480px;
  

  .container header .header-nav-area #nav_container  
    display:flex;
  

  .container header form 
    display:block;
  

  .container header .menu-icon 
    display:none;
  

  header .wrapper .article footer 
    display: block;
  

  section.dashboard .slick-list .slick-track 
    display: flex;
    min-width: 309px;
    padding: 20px;
  
  
  section.dashboard .slick-list .slick-track[index="2"] 
    display: flex;
  

  section.dashboard .slick-list .slide 
    opacity: 1;
  
 

更多详情请访问； https://itnext.io/3-ways-to-implement-responsive-design-in-your-react-app-bcb6ee7eb424