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 구성 요소를 하위 요소로 래핑합니다.

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

・이 컴포넌트는 하위 컴포넌트로 수신되는 Left 컴포넌트와 Right 컴포넌트로 구성됩니다.

・leftWidth 및 rightWidth로 소품을 받는 각 구성 요소의 너비를 변경할 수 있습니다.

위 내용은 React 디자인 패턴~레이아웃 구성 요소~의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!