{ return"/> { return">

Home  >  Article  >  Web Front-end  >  React Design Patterns~Layout Componets~

React Design Patterns~Layout Componets~

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-09-19 18:16:38608browse
  • Screen Splitter

This pattern is often used in common layouts that consist of sidebar, main, and so on.

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

・This component wraps the LeftSide and RightSide components inside the SplitScreen component as children.

・I pass title props to the LeftSide and RightSide components.

・I pass leftWidth and rightWidth props to the SplitScreen component so that I can change the width of each of the components.

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

・This component is composed of the Left and Right components, which are received as children.

・I can change the width of each of the components receiving props as leftWidth and rightWidth.

React Design Patterns~Layout Componets~

The above is the detailed content of React Design Patterns~Layout Componets~. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn