这种模式经常用于由侧边栏、主栏等组成的常见布局。
・App.js
import { SplitScreen } from "./components/split-screen";
const LeftSide = ({ title }) => {
return <h2 style={{ backgroundColor: "red" }}>{title}</h2>;
};
const RightSide = ({ title }) => {
return <h2 style={{ backgroundColor: "blue" }}>{title}</h2>;
};
function App() {
return (
<SplitScreen leftWidth={1} rightWidth={3}>
<LeftSide title={"Left"} />
<RightSide title={"Right"} />
</SplitScreen>
);
}
export default App;
・该组件将 SplitScreen 组件中的 LeftSide 和 RightSide 组件作为子组件包装。
・我将标题道具传递给 LeftSide 和 RightSide 组件。
·我将 leftWidth 和 rightWidth 属性传递给 SplitScreen 组件，以便我可以更改每个组件的宽度。
・split-screen.js
import React from "react";
import { styled } from "styled-components";
const Container = styled.div`
display: flex;
`;
const Panel = styled.div`
flex: ${(p) => p.flex};
`;
export const SplitScreen = ({ children, leftWidth = 1, rightWidth = 1 }) => {
const [left, right] = children;
return (
<Container>
<Panel flex={leftWidth}>{left}</Panel>
<Panel flex={rightWidth}>{right}</Panel>
</Container>
);
};
・该组件由左组件和右组件组成，它们作为子组件接收。
・我可以将每个接收 props 的组件的宽度更改为 leftWidth 和 rightWidth。
以上是React 设计模式~布局组件~的详细内容。更多信息请关注PHP中文网其他相关文章！
