如何将多个网格容器包装在 React Fragment 元素中答案

【问题标题】：How to wrap multiple grid container inside a React Fragment element如何将多个网格容器包装在 React Fragment 元素中
【发布时间】：2021-06-05 18:35:13
【问题描述】：

结构- 假设 footer 元素返回以下 JSX，然后我在 LoginPage 元素中使用 footer 元素。

<React.Fragment>
[container1...(full width)]
[container2...(width- 60%)] [container3...(width- 40%)]
</React.Fragment>

我知道网格容器和项目概念，但在这里我想用 React Fragment 元素包装所有容器，以便在 LoginPage 文件内的页脚元素中应用特定属性。我该怎么做？

虽然我可以转换项目中的所有 3 个容器，然后包装在一个新容器中，但这不符合我的要求

请推荐其他 Material-UI 布局容器（如果有）

【问题讨论】：

请定义您的问题。
示例代码需要更多上下文。问题不清楚。

标签： reactjs material-ui grid containers

【解决方案1】：

目前还不清楚您要做什么。如果你想将 props 传递给你的 Footer，你可以通过传播你在 LoginPage.js 中声明的 props 来做到这一点

LoginPage.js

    import React from "react";
    import Footer from "./footer";
    
    export default function SimpleContainer() {
      return (
          <Footer maxWidth="sm" style={{ height: "20vh" }}>
            More footer content
          </Footer>
      );
    }

页脚.js

    import React from "react";
    import Typography from "@material-ui/core/Typography";
    import Container from "@material-ui/core/Container";
    
    export default function Footer({ children, ...options }) {
      return (
        <React.Fragment>
          <Container {...options}>
            <Typography
              component="div"
              style={{ backgroundColor: "#cfe8fc", height: "100%" }}
            >
              Footer Container
            </Typography>
          </Container>
          {children}
        </React.Fragment>
      );
    }

在这里演示https://codesandbox.io/s/material-demo-forked-thsbg?file=/footer.js

如果这不是你想要的，请随意扩展

【讨论】：