React 设计模式~布局组件~

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;

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>
  );
};