Corak Reka Bentuk Bertindak Balas~Komponen Susun Atur~

• Pecah Skrin

Corak ini sering digunakan dalam reka letak biasa yang terdiri daripada bar sisi, utama dan sebagainya.

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

・Komponen ini membalut komponen LeftSide dan RightSide di dalam komponen SplitScreen sebagai kanak-kanak.

・Saya menyampaikan prop tajuk kepada komponen LeftSide dan RightSide.

・Saya menghantar props leftWidth dan rightWidth kepada komponen SplitScreen supaya saya boleh menukar lebar setiap komponen.

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

・Komponen ini terdiri daripada komponen Kiri dan Kanan, yang diterima sebagai kanak-kanak.

・Saya boleh menukar lebar setiap komponen yang menerima prop sebagai Lebar kiri dan Lebar kanan.

Atas ialah kandungan terperinci Corak Reka Bentuk Bertindak Balas~Komponen Susun Atur~. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!