React Design Patterns~Layout Componets~-JS Tutorial-php.cn

React Design Patterns~Layout Componets~

Mary-Kate Olsen

Release： 2024-09-19 18:16:38

Original

576 people have browsed it

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;

Copy after login

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

Copy after login

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