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 コンポーネントを子としてラップします。

・title props を LeftSide コンポーネントと RightSide コンポーネントに渡します。

・SplitScreen コンポーネントに leftWidth プロパティと rightWidth プロパティを渡して、各コンポーネントの幅を変更できるようにします。

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

・このコンポーネントは子として受け取られる Left コンポーネントと Right コンポーネントから構成されます。

・propsを受け取る各コンポーネントの幅をleftWidthとrightWidthとして変更できます。

以上がReactデザインパターン〜レイアウトコンポーネント〜の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。