Heim > Web-Frontend > js-Tutorial > Hauptteil

React Design Patterns~Layout-Komponenten~

Mary-Kate Olsen
Freigeben: 2024-09-19 18:16:38
Original
618 Leute haben es durchsucht
  • 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;
Nach dem Login kopieren

・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>
  );
};
Nach dem Login kopieren

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

React Design Patterns~Layout Componets~

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage