Modèles de conception React ~ Composants de mise en page ~-js tutoriel-php.cn

Modèles de conception React ~ Composants de mise en page ~

Mary-Kate Olsen

Libérer： 2024-09-19 18:16:38

original

642 Les gens l'ont consulté

Séparateur d'écran

Ce modèle est souvent utilisé dans les mises en page courantes composées d'une barre latérale, d'une barre principale, etc.

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

Copier après la connexion

・Ce composant enveloppe les composants LeftSide et RightSide à l'intérieur du composant SplitScreen en tant qu'enfants.

・Je passe les accessoires de titre aux composants LeftSide et RightSide.

・Je passe les accessoires leftWidth et rightWidth au composant SplitScreen afin de pouvoir modifier la largeur de chacun des composants.

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

Copier après la connexion

・Ce composant est composé des composants Gauche et Droite, qui sont reçus en tant qu'enfants.

・Je peux changer la largeur de chacun des composants recevant des accessoires comme leftWidth et rightWidth.

React Design Patterns~Layout Componets~