React 设计模式~布局组件~

import { splitscreen } from "./components/split-screen";const leftside = ({ title }) =&gt; {  return <h2 style="{{" backgroundcolor:>{title}</h2>;};const rightside = ({ title }) =&gt; {  return <h2 style="{{" backgroundcolor:>{title}</h2>;};function app() {  return (    <splitscreen leftwidth="{1}" rightwidth="{3}"><leftside title='{"left"}'></leftside><rightside title='{"right"}'></rightside></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) =&gt; p.flex};`;export const SplitScreen = ({ children, leftWidth = 1, rightWidth = 1 }) =&gt; {  const [left, right] = children;  return (    <container><panel flex="{leftWidth}">{left}</panel><panel flex="{rightWidth}">{right}</panel></container>  );};