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

【问题标题】：responsive layout on React applicationReact 应用程序上的响应式布局
【发布时间】：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

标签： javascript html css reactjs bootstrap-4

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

【讨论】：