# React 组件设计全攻略：15+ 个核心 UI 组件设计模式与最佳实践
> 深度解析 React 组件设计原则与实践，涵盖 Select、Modal、Table、Form 等 15+ 个核心 UI 组件的完整设计方案，包含 API 设计、交互逻辑和代码实现的最佳实践。
- 发布于: 2020-08-15
- 原文: https://shanyue.tech/posts/react-component-design/
- 标签: react, component-design, ui-library, frontend-architecture, design-patterns
---
## 设计一个 Select 组件
```jsx
// 支持多选
```
**设计要点：**
- 支持受控和非受控模式
- 支持单选、多选模式
- 键盘导航支持
- 虚拟滚动（大数据量场景）
## 设计一个 Icon 组件
```jsx
// 支持自定义图标
```
**设计要点：**
- 支持内置图标库和自定义图标
- 支持旋转、动画效果
- 可配置大小、颜色等样式属性
## 设计一个 Layout 组件
```jsx
Header
Sider
Main Content
Footer
// 响应式布局
Sidebar
Content
```
**设计要点：**
- 支持经典的上中下、左中右布局
- 侧边栏可折叠
- 响应式设计
- 灵活的嵌套组合
## 设计一个 Avatar 组件
```jsx
张
// 头像组
```
**设计要点：**
- 支持图片、图标、文字显示
- 可配置大小、形状（圆形/方形）
- 头像组支持最大显示数量
- 图片加载失败时的降级处理
## 设计一个 Button 组件
```jsx
// 按钮组
```
**设计要点：**
- 多种类型：primary、default、dashed、text、link
- 支持加载状态、禁用状态
- 可配置大小、形状
- 支持图标按钮和按钮组
## 设计一个 Input 组件
```jsx
setUsername(e.target.value)}
/>
```
**设计要点：**
- 支持不同类型：text、password、search、textarea
- 前缀后缀插槽
- 字符计数、最大长度限制
- 清除按钮、密码可见性切换
## 设计一个 Modal 组件
```jsx
确定要删除这个项目吗？此操作不可恢复。
;
// 函数式调用
Modal.confirm({
title: "确认删除",
content: "此操作不可恢复",
onOk: () => handleDelete(),
});
```
**设计要点：**
- 支持声明式和函数式两种调用方式
- 可配置标题、内容、按钮文本
- 支持拖拽、全屏模式
- 键盘 ESC 关闭、点击遮罩关闭
## 设计一个 Table 组件
```jsx
{text},
},
{
title: "年龄",
dataIndex: "age",
key: "age",
sorter: (a, b) => a.age - b.age,
},
{
title: "操作",
key: "action",
render: (text, record) => (
),
},
]}
pagination={{
current: currentPage,
pageSize: 10,
total: total,
onChange: handlePageChange,
}}
rowSelection={{
selectedRowKeys,
onChange: setSelectedRowKeys,
}}
/>
```
**设计要点：**
- 支持排序、筛选、分页
- 行选择功能
- 自定义列渲染
- 固定列、表头
- 虚拟滚动（大数据量）
## 设计一个 Tabs 组件
```jsx
设置}
key="settings"
>
// 可编辑标签页
{
if (action === 'add') {
handleAddTab();
} else {
handleRemoveTab(targetKey);
}
}}
>
{tabPanes}
```
**设计要点：**
- 支持多种样式：line、card、editable-card
- 标签页可编辑（新增、删除）
- 支持图标、自定义标签内容
- 懒加载内容
## 设计一个 Form 组件
```jsx
```
**设计要点：**
- 字段验证、错误提示
- 支持同步和异步验证
- 多种布局方式
- 字段联动、动态字段
## 设计一个 Card 组件
```jsx
更多}
actions={[
,
,
]}
>
卡片内容
}
style={{ width: 300 }}
>
}
title="标题"
description="描述信息"
/>
```
**设计要点：**
- 支持标题、额外操作、底部操作
- 可配置封面图片
- 悬浮效果
- 加载状态
## 设计一个 DatePicker 组件
```jsx
```
**设计要点：**
- 支持日期、日期时间、日期范围选择
- 可配置日期格式
- 禁用日期、快捷选择
- 国际化支持
## 设计一个 Upload 组件
```jsx
}>上传文件
// 拖拽上传
点击或拖拽文件到此区域上传
```
**设计要点：**
- 支持点击、拖拽上传
- 多种显示样式：文本、图片、卡片
- 文件预览、进度显示
- 上传前校验、自定义上传逻辑
## 设计一个 Tooltip 组件
```jsx
点击显示提示
```
**设计要点：**
- 多种触发方式：hover、click、focus
- 可配置显示位置
- 支持自定义样式和内容
- 自动调整位置避免边界溢出
## 设计一个 Loading 组件
```jsx
加载中的内容
// 独立的加载指示器
} />
```
**设计要点：**
- 支持包裹内容和独立使用
- 可配置加载文本、大小
- 自定义加载指示器
- 延迟显示避免闪烁
## 设计一个 Pagination 组件
```jsx
`第 ${range[0]}-${range[1]} 条/共 ${total} 条`
}
/>
```
**设计要点：**
- 支持完整模式和简单模式
- 页码跳转、每页条数选择
- 总数显示、自定义文本
- 键盘导航支持