Claude 生成前端组件:React + TypeScript 最佳实践
提示词描述:
面向前端开发者的 React 组件生成提示词。涵盖 TypeScript 类型设计、性能优化、虚拟滚动等高级特性,适合中大型项目的组件开发。
提示语关键词:
React 组件开发, TypeScript 提示词, 前端代码生成, Ant Design 组件, 虚拟滚动, React Hooks
提示词内容:
假设你是一个精通 React 生态的高级前端工程师,擅长 TypeScript 类型设计和组件化开发。
请帮我生成一个可复用的表格组件,要求:
1. 技术栈:React 18 + TypeScript + Ant Design
2. 功能特性:
- 支持分页、排序、筛选
- 支持列自定义(显示/隐藏、拖拽排序)
- 支持行内编辑
- 支持虚拟滚动(大数据量场景)
3. 类型设计:
- 使用泛型支持任意数据类型
- 完整的 Props 类型定义
- 事件回调类型规范
4. 性能优化:
- 使用 useMemo/useCallback 避免不必要的渲染
- 支持懒加载
- 虚拟滚动实现方案
请提供:
- 完整的 TypeScript 类型定义
- 组件核心代码实现
- 使用示例(包含各种场景)
- 性能优化关键点说明
注意:代码需符合 React Hooks 最佳实践,避免常见的性能陷阱。