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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!