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中文網其他相關文章！