React 响应式设计重新排序组件答案

【问题标题】：React responsive design reorder componentsReact 响应式设计重新排序组件
【发布时间】：2021-12-28 22:29:22
【问题描述】：

我正在开发一个有两种布局（移动和桌面）的网页。在桌面布局中，我希望有一个垂直拆分页面，其中主要内容位于右侧，页眉、页脚和内容图像位于左侧（请查看下图）。

在移动设备上，我希望布局看起来有所不同，页面不再拆分，组件流从页眉开始，然后是主要内容，最后是页脚。内容图像不再显示（检查下图）。

我遇到的问题在于移动布局。我想重新排列显示的组件，而不必使用反应钩子重新渲染它们，因为创建的组件的结构是这样的：

Page
├─ Left Pane
│  ├─ Header
│  ├─ Image
│  ├─ Footer
│
│
├─ Right Pane
   ├─ Main content

所需的移动结构如下所示：

Page
├─ Header
├─ Main Content
├─ Footer

我尝试使用 display/padding/margin 属性根据媒体查询设置不同的 CSS 样式，并让它有点工作，但是当页脚的内容太长时，这是一个 hacky 解决方案，它会与主要内容重叠内容和页面无法正确显示组件。

有什么方法可以做到这一点而不必触发 React 重新渲染？或者对于我的页面是否有更好的结构建议，以确保桌面版本中的左右窗格完全相互隔离并正确显示移动网站？

【问题讨论】：

标签： css reactjs responsive-design frontend

【解决方案1】：

有办法做到这一点！您需要使用CSS Grid。下面是使用 Grid 的功能预览。请注意，当下方预览的宽度小于 550 像素时，布局会发生变化。您可以更改 @media 查询以适合您的用例。

html,
body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px auto 50px
}

.header {
  background: #CDCD00;
  grid-column: 1;
  grid-row: 1;
}

.footer {
  background: #CDCD00;
  grid-column: 1;
  grid-row: 3;
}

.image {
  background: #372F9F;
  grid-column: 1;
  grid-row: 2;
}

.content {
  background: #DF1829;
  grid-column: 2;
  grid-row: 1 / 4;
}

@media only screen and (max-width: 550px) {
  .image {
    display: none;
  }
  .content {
    grid-column: 1;
    grid-row: 2;
  }
  .grid {
    grid-template-columns: 1fr;
  }
}


/* Fancy unneccessary styles */

body {
  font-family: sans-serif;
}

h1 {
  margin: auto;
  align-items: center;
}

div {
  text-align: center;
  display: flex;
  justify-content: center;
}

<div class="grid">
  <div class="header">
    <h1>Header Placeholder</h1>
  </div>
  <div class="footer">
    <h1>Footer Placeholder</h1>
  </div>
  <div class="image">
    <h1>Image container</h1>
  </div>
  <div class="content">
    <h1>Main content container</h1>
  </div>
</div>

【讨论】：

这就像我想要的那样工作，但我发现@Authentic Science 提供的答案是为了让它工作的重构和设计结构更改更少。谢谢！
完全明白！祝你的项目好运?

【解决方案2】：

没有一些代码很难说，但如果你使用的是 flexbox，如果你想要一个纯 css 解决方案，你可以在媒体查询中使用order。这里有一些信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#the_order_property

【讨论】：

很好的答案，谢谢！