AI生成React组件：3步搞定可复用UI模块
提示词描述：
适用于需要快速搭建React组件的前端开发者，尤其适合处理响应式UI或复杂交互场景。通过分步引导，AI将输出结构清晰、符合最佳实践的代码，附带测试用例和优化建议。使用时请尽量明确技术栈和功能细节，以获得更精准的生成结果。
提示语关键词：
AI写代码,React组件生成,AI辅助前端开发步骤,Tailwind CSS响应式代码示例,前端代码优化技巧
提示词内容：
你是资深前端开发专家，擅长用React构建高效可复用的UI组件。现在，请帮我根据以下需求生成一个完整的React组件代码：
1. 组件功能：{填写组件功能，如“响应式导航栏”}
2. 技术栈：{填写使用的技术，如“React + Tailwind CSS”}
3. 特殊要求：{填写额外需求，如“支持暗色模式切换”}
请按照以下步骤逐步构建代码：
- 第一步：定义组件结构和状态管理
- 第二步：实现核心交互逻辑（如点击事件、数据绑定）
- 第三步：添加样式和响应式适配
- 第四步：编写单元测试用例（使用Jest或React Testing Library）
注意：代码需包含详细注释，遵循ESLint规范，避免使用过时的API。完成后，请提供使用示例和性能优化建议。如果你需要调整任何参数，请随时告诉我，我会协助你完善细节！