Question

我目前正在使用ReactJs和CSS网格布局构建单页应用程序，用于组件的放置和样式化。

然而，这两种技术并不是很好地结合在一起：CSS网格布局只能（轻松）应用于父容器的子元素（网格项）。但是ReactJS的本质意味着具有大童组件的组件甚至是曾祖母都很常见。

举个例子：

React组件树：App＆gt; ToDoList＆gt;待办事项＆gt;详细...

如果，onClick，我想移动＆＃39;待办事项＆＃39; to grid-row：＆＃39; App＆＃39;组件似乎唯一的方法是将ToDoList本身作为整个App组件的网格。这会导致页面上其他元素的布局问题。

我是否正确地认为这两种方法不能很好地协同发挥，或者这是我对这两种技术理解的缺陷？

Answer 1

你是对的，从CSS网格候选推荐书（https://github.com/w3c/csswg-drafts/issues/958）弃用了子网格。

希望它们重新出现，它们似乎对简化复杂的布局非常有用。我只发现CSS网格可用于布置反应应用程序或容器的顶层。

Answer 2

您可以定义这样的组件，以“展开”每个孩子的外部元素：

const Unwrap = ({ children, ...props}) => (
    <div {...props}>
        {children.reduce((acc, child) => acc.concat(child.children), [])}
    </div>
)

然后像这样使用它：

<Unwrap>
    {rows.map(renderMyRow)}
</Unwrap>

编辑：我只是注意到这实际上并不总是有效，但我太累了，无法弄清楚它在什么情况下会失败。

再次编辑：更好的方法可能是将display设置为contents的div中包裹一行，如下所示：https://stackoverflow.com/a/53643295/1046221

Answer 3

我肯定也见过同样的问题，尽管这是一个相对较旧的问题，但我认为这是一个非常有趣的问题。

在我看来，现实是，如果您要充分利用组件驱动的框架，则会遇到深层嵌套的组件/元素的问题。尽管没有真正的“子网格”，但请记住“通过设置display：grid然后定义行和列，任何网格区域都可以变成网格本身。” （https://gridbyexample.com/examples/example21/）。但是，如果您有这样的事情：

<div class="page-wrapper">
  <section></section>
  <section></section>
  <section>
    <div class="section-item"></div>
    <div class="section-item">
      <div class="sub-section"><div>
    </div>
  </section>
 </div>

并且您想使用CSS将.sub-section放在.page-wrapper定义的网格上的其他位置，这只是通过更改css就无法做到的，除了可能需要一些棘手的绝对或固定位置。归根结底，您实际上只能在父项中重新排列项。

我可能会提出一些建议，例如在“新”位置放置一个空白组件，该组件可以与原始“待办事项”组件通信，然后在click上将其从一个到另一个。

不过，在更广泛的主题上，我将提交一个决定，即应在页面布局的每个渐进级别上决定使用哪种CSS布局选项。仅仅因为Grid或Flex可以很好地（或不能）布局特定设计的大部分区域，并不意味着您必须（或应该）锁定应用程序所有元素的布局。为了更进一步，在每个部分中，我相信您应该根据内容以及它们的组织和显示方式来评估该特定部分的布局选项。

例如，如果页面的主要内容是网格或砖石风格的布局，则无论如何，网格可能是该部分的最佳选择，但这并不意味着整个页面布局都需要网格。。您很有可能会发现，使用flex进行顶层布局会产生更好的效果，并将网格放在这些部分之一中。

再举一个例子，如果您使用网格对顶层页面区域进行布局，那么该网格将控制菜单的显示位置，但是在该网格区域内使用flex布局菜单项仍然很有意义。

最后，要在对话中添加更广泛的上下文，这实际上只是许多开发人员在使用Bootstrap这样的CSS网格（使用浮点数创建列）时遇到的另一个问题。当然，您可以嵌套引导行和列以创建子网格，但是就获得出色的响应行为而言，这是在第一或第二个嵌套层之后的真正挑战（取决于您的耐心程度以及仅使用该网格的承诺程度）系统进行布局）。

我研究过的团队很快发现，对于大的部分使用bootstrap的网格，而对那些部分的大多数内部内容使用flex则更容易维护-更不用说需要更少的标记了。随着网格现在也得到了广泛的支持，我希望我们会发现网格的效率更高，在浮法和柔韧性曾是唯一选择的地方，网格的使用频率更高。

如何有效地使用带有React的CSS网格布局？

3 个答案: