WangShuXian6
commented
3 months ago 2. 设计模式布局组件 Design Patterns Layout Components
2. 介绍
3. 屏幕分割器 Screen Splitter
npm create vite@latest react-dp
react
typescript
pnpm i
pnpm i styled-components -S
pnpm run devsrc\components\split-screen.tsx
import React from "react";
import { styled } from "styled-components";
const Container = styled.div`
display: flex;
`;
const Panel = styled.div`
flex: 1;
`;
interface SplitScreenProps {
Left: React.ComponentType;
Right: React.ComponentType;
}
//使用 SplitScreenProps 作为 props 类型，并显式声明返回类型为 React.ReactElement。
export const SplitScreen = ({
Left,
Right,
}: SplitScreenProps): React.ReactElement => {
return (
<Container>
<Panel>
<Left />
</Panel>
<Panel>
<Right />
</Panel>
</Container>
);
};
src\App.tsx
import "./App.css";
import { SplitScreen } from "./components/split-screen";
const LeftSideComp = () => {
return <h2 style={{ backgroundColor: "red" }}>left</h2>;
};
const RightSideComp = () => {
return <h2 style={{ backgroundColor: "blue" }}>right</h2>;
};
function App() {
return <SplitScreen Left={LeftSideComp} Right={RightSideComp} />;
}
export default App;
4. 屏幕分割器增强 Screen Splitter Enhancement
src\components\split-screen.tsx
import React from 'react';
import { styled } from 'styled-components';
// 定义 styled-components 的类型
const Container = styled.div`
display: flex;
`;
interface PanelProps {
flex: number;
}
const Panel = styled.div<PanelProps>`
flex: ${(p) => p.flex};
`;
// 定义 SplitScreen 组件的 props 类型
interface SplitScreenProps {
children: [React.ReactNode, React.ReactNode];
leftWidth?: number;
rightWidth?: number;
}
export const SplitScreen = ({
children,
leftWidth = 1,
rightWidth = 1,
}: SplitScreenProps): React.ReactElement => {
const [left, right] = children;
return (
<Container>
<Panel flex={leftWidth}>{left}</Panel>
<Panel flex={rightWidth}>{right}</Panel>
</Container>
);
};src\App.tsx
import React from 'react';
import './App.css';
import { SplitScreen } from './components/split-screen';
interface SideCompProps {
title: string;
}
const LeftSideComp = ({ title }: SideCompProps): React.ReactElement => {
return <h2 style={{ backgroundColor: 'crimson' }}>{title}</h2>;
};
const RightSideComp = ({ title }: SideCompProps): React.ReactElement => {
return <h2 style={{ backgroundColor: 'burlywood' }}>{title}</h2>;
};
function App(): React.ReactElement {
return (
<SplitScreen leftWidth={1} rightWidth={3}>
<LeftSideComp title="Left" />
<RightSideComp title="Right" />
</SplitScreen>
);
}
export default App;5. 列表 Lists
src\components\authors\LargeListItems.tsximport React from 'react';
export interface Author { name: string; age: number; country: string; books: string[]; }
interface LargeAuthorListItemProps { author: Author; }
export const LargeAuthorListItem = ({ author }: LargeAuthorListItemProps): React.ReactElement => { const { name, age, country, books } = author; return ( <>
{name}
<p>Age: {age}</p>
<p>Country: {country}</p>
<h2>Books</h2>
<ul>
{books.map((book) => (
<li key={book}>{book}</li>
))}
</ul>
</>); };
>`src\components\authors\SmallListItems.tsx`
```tsx
// components/authors/SmallAuthorListItem.tsx
import React from 'react';
import { Author } from './LargeListItems';
interface SmallAuthorListItemProps {
author: Pick<Author, 'name' | 'age'>;
}
export const SmallAuthorListItem = ({ author }: SmallAuthorListItemProps): React.ReactElement => {
const { name, age } = author;
return (
<p>Name: {name}, Age: {age}</p>
);
};
src\components\lists\Regular.tsximport React from 'react';
interface RegularListProps
export const RegularList = <T,>({ items, sourceName, ItemComponent }: RegularListProps
>`src\data\authors.ts`
```tsx
export const authors = [
{
name: "Sarah Waters",
age: 55,
country: "United Kingdom",
books: ["Fingersmith", "The Night Watch"],
},
{
name: "Haruki Murakami",
age: 71,
country: "Japan",
books: ["Norwegian Wood", "Kafka on the Shore"],
},
{
name: "Chimamanda Ngozi Adichie",
age: 43,
country: "Nigeria",
books: ["Half of a Yellow Sun", "Americanah"],
},
];
src\App.tsximport { LargeAuthorListItem } from "./components/authors/LargeListItems"; import { SmallAuthorListItem } from "./components/authors/SmallListItems"; import { RegularList } from "./components/lists/Regular"; import { authors } from "./data/authors";
function App() { return ( <> <RegularList items={authors} sourceName={"author"} ItemComponent={SmallAuthorListItem} /> <RegularList items={authors} sourceName={"author"} ItemComponent={LargeAuthorListItem} /> </> ); }
export default App;
## 6. 列表类型 Lists Types
>`src\components\books\LargeListItems.tsx`
```tsx
import React from 'react';
export interface Book {
name: string;
price: number;
title: string;
pages: number;
}
interface LargeBookListItemProps {
book: Book;
}
export const LargeBookListItem = ({ book }: LargeBookListItemProps): React.ReactElement => {
const { name, price, title, pages } = book;
return (
<>
<h2>{name}</h2>
<p>{price}</p>
<h2>Title:</h2>
<p>{title}</p>
<p># of Pages: {pages}</p>
</>
);
};
src\components\books\SmallListItems.tsximport React from 'react'; import { Book } from './LargeListItems';
interface SmallBookListItemProps { book: Pick<Book, 'name' | 'price'>; }
export const SmallBookListItem = ({ book }: SmallBookListItemProps): React.ReactElement => { const { name, price } = book; return (
{name} / {price}
); };
>`src\components\lists\Numbered.tsx`
```tsx
import React from "react";
interface NumberedListProps<T> {
items: T[];
sourceName: string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ItemComponent: any; //React.ComponentType<{ [key: string]: T }>;
}
export const NumberedList = <T,>({
items,
sourceName,
ItemComponent,
}: NumberedListProps<T>): React.ReactElement => {
return (
<>
{items.map((item, i) => {
const props = { [sourceName]: item };
return (
<React.Fragment key={i}>
<h3>{i + 1}</h3>
<ItemComponent {...props} />
</React.Fragment>
);
})}
</>
);
};
src\App.tsximport { LargeAuthorListItem } from "./components/authors/LargeListItems"; import { SmallAuthorListItem } from "./components/authors/SmallListItems"; import { LargeBookListItem } from "./components/books/LargeListItems"; import { SmallBookListItem } from "./components/books/SmallListItems"; import { NumberedList } from "./components/lists/Numbered"; import { RegularList } from "./components/lists/Regular"; import { authors } from "./data/authors"; import { books } from "./data/books";
function App() { return ( <> <RegularList items={authors} sourceName={"author"} ItemComponent={SmallAuthorListItem} /> <NumberedList items={authors} sourceName={"author"} ItemComponent={LargeAuthorListItem} />
<RegularList
items={books}
sourceName={"book"}
ItemComponent={SmallBookListItem}
/>
<NumberedList
items={books}
sourceName={"book"}
ItemComponent={LargeBookListItem}
/>
</>); }
export default App;
## 7. 模态框 Modals
非受控，因为父级无法从模态框外部控制模态框的状态。
这个模型是非受控的，因为这个模型本身可以控制自己，比如显示和隐藏组件的 show 和 setShow。
我们说它是非受控的，因为外部组件无法直接访问它的特性。
因为我无法访问这个模型的状态，包括 show 和 setShow，这降低了模型的灵活性，因为它是非受控的。
>`src\components\Modal.tsx`
```tsx
import React, { useState, ReactNode } from 'react';
import { styled } from 'styled-components';
const ModalBackground = styled.div`
position: absolute;
left: 0;
top: 0;
overflow: auto;
background-color: #00000067;
width: 100%;
height: 100%;
`;
const ModalContent = styled.div`
margin: 12% auto;
padding: 24px;
background-color: wheat;
width: 50%;
`;
interface ModalProps {
children: ReactNode;
}
export const Modal = ({ children }: ModalProps): React.ReactElement => {
const [show, setShow] = useState<boolean>(false);
return (
<>
<button onClick={() => setShow(true)}>Show Modal</button>
{show && (
<ModalBackground onClick={() => setShow(false)}>
<ModalContent onClick={(e) => e.stopPropagation()}>
<button onClick={() => setShow(false)}>Hide Modal</button>
{children}
</ModalContent>
</ModalBackground>
)}
</>
);
};
src\App.tsximport { Modal } from "./components/Modal"; import { LargeBookListItem } from "./components/books/LargeListItems"; import { books } from "./data/books";
function App() { return ( <>
</>); }
export default App;
React进阶开发 设计系统, 设计模式, 性能优化Advanced React Design System, Design Patterns, Performance
目录