React 设计模式~布局组件~

• 屏幕分割器

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

・App.js

import { SplitScreen } from "./components/split-screen";

const LeftSide = ({ title }) => {
  return <h2 id="title">{title}</h2>;
};

const RightSide = ({ title }) => {
  return <h2 id="title">{title}</h2>;
};

function App() {
  return (
    <splitscreen leftwidth="{1}" rightwidth="{3}">
      <leftside title='{"Left"}'></leftside>
      <rightside title='{"Right"}'></rightside>
    </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中文网其他相关文章！