Qoder生成可运行React组件需明确四要素：组件名称与定位、核心交互行为、UI元素及状态、技术约束；缺一不可，否则代码缺失状态管理、事件绑定或样式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想用自然语言一句话生成可运行的React组件代码，但Qoder不会凭空猜你要什么——必须明确告诉它组件功能、交互逻辑、UI结构和依赖要求，否则生成的代码要么缺状态管理、要么没事件绑定、要么样式全崩。
核心需求四要素
第一步：说清组件名称与定位。例如“用户头像上传组件”，不能只说“做个上传框”。名称决定文件名（AvatarUpload.tsx）、目录路径（src/components/AvatarUpload/）和默认导出名。
第二步：描述核心交互行为。必须写明“点击触发本地文件选择→预览图片→拖拽替换→裁剪后提交→失败时显示错误提示”。漏掉“裁剪后提交”，Qoder就不会集成react-avatar-cropper；漏掉“失败时提示”，错误边界和Toast调用就全无。
第三步：列出UI元素及其状态。比如“带圆角边框的预览区、禁用态的提交按钮、加载中的旋转图标、成功后的绿色对勾图标”。不提“禁用态”，按钮就会永远可点；不说“加载中图标”，loading状态就只剩文字卡顿。
第四步：声明技术约束。例如“使用React 18 + TypeScript + Zustand + Ant Design v5，禁止使用任何第三方UI库以外的图片处理包”。【若未声明Zustand，Qoder默认用useState，后续接入全局状态时需手动重写】
避坑型需求写法
方法一：用“当…就…”句式锁定逻辑链。例如：“当用户拖入PNG文件时，就自动检测宽高比；当宽高比非1:1时，就弹出裁剪确认浮层；当用户取消裁剪，就还原原始文件。”这种写法能防止Qoder把裁剪逻辑写进useEffect依赖数组里造成死循环。
方法二：用括号补充不可见规则。例如：“提交按钮（仅在图片URL非空且未处于loading状态时启用）”、“错误提示（显示在预览区正下方，红色小号字体，持续3秒后自动消失）”。括号里的内容是视觉稿里看不到但代码里必须硬编码的规则。
方法三：直接否定常见误判。例如：“不要自动生成API调用代码（后端接口由其他团队统一提供）”、“不要引入file-saver（项目已全局封装downloadBlob工具函数）”。【不加这句，Qoder会默认注入qrcode.react或axios等无关依赖】
一句话需求模板
第一步：组件用途 → 第二步：用户操作路径 → 第三步：UI响应细节 → 第四步：技术栈限定
示例：“做一个订单状态追踪卡片组件，用户点击‘查看物流’按钮后，调用/order/tracking接口获取进度节点，按时间倒序渲染圆点连线图，每个节点含时间戳、状态文案和物流单号（点击可复制），使用React 18 + TSX + Tailwind CSS，所有图标用Lucide React，禁止引入任何图表库。”
这一步操作起来很简单，直接把这句话粘贴进Qoder的Quest模式对话框，点击“生成”即可。
