React Design Patterns~Layout-Komponenten~

• Bildschirmteiler

Dieses Muster wird häufig in gängigen Layouts verwendet, die aus Seitenleiste, Hauptleiste usw. bestehen.

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

・Diese Komponente schließt die LeftSide- und RightSide-Komponenten als untergeordnete Elemente in die SplitScreen-Komponente ein.

・Ich übergebe Titel-Requisiten an die LeftSide- und RightSide-Komponenten.

・Ich übergebe die Requisiten „leftWidth“ und „rightWidth“ an die SplitScreen-Komponente, damit ich die Breite jeder der Komponenten ändern kann.

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

・Diese Komponente besteht aus den linken und rechten Komponenten, die als untergeordnete Elemente empfangen werden.

・Ich kann die Breite jeder Komponente, die Requisiten empfängt, als leftWidth und rightWidth ändern.

Das obige ist der detaillierte Inhalt vonReact Design Patterns~Layout-Komponenten~. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!