React 设计模式~布局组件~

文章不知道大家是否熟悉？今天我将给大家介绍《React 设计模式~布局组件~》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

• 屏幕分割器

这种模式经常用于由侧边栏、主栏等组成的常见布局。

・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 设计模式~布局组件~》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！