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

Question

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

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

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

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

请建议其他材料UI布局容器(如果有(

Answer 1

目前还不清楚你想做什么。如果你想把道具传给你的Footer，你可以把你在LoginPage.js 中声明的道具分散开来

登录页面.js

import React from "react";
import Footer from "./footer";

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

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

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