Qoder编写React组件需明确三步：一是定义具体组件名称与用途；二是声明SSR/CSR及React版本；三是约束JSX结构、Props接口、状态逻辑与交互细节，否则易生成类型缺失、结构错误或行为异常代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Qoder编写React组件时，Prompt需明确组件功能、结构约束与交互逻辑，否则生成的代码常缺少props类型定义、状态管理或JSX结构不合法。
明确组件基础信息
第一步：在Prompt开头用一句话定义组件名称和核心用途，例如“创建一个带搜索框和结果列表的用户选择器组件”。名称必须具体，不能写“某个组件”或“通用组件”，否则Qoder会默认生成无业务语义的占位代码。
第二步：声明是否需要支持服务端渲染（SSR）或客户端专属API（如navigator.geolocation）。若未说明，默认按CSR处理，【若实际部署在Next.js App Router中却未声明use client，组件将无法渲染】。
第三步：注明React版本要求，如“基于React 18.3，使用Hook语法，禁用class组件”。Qoder对19+的Action/Resource API支持尚不稳定，写明版本可规避useFormState等新API误用。
约束JSX结构与Props接口
方法一：用自然语言描述DOM层级。例如：“根元素为
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
方法二：直接提供TypeScript接口片段。在Prompt中插入代码块：interface UserSelectorProps { onUserSelect: (user: {id: string; name: string}) => void; disabled?: boolean; }。Qoder会据此生成严格校验的props解构和类型注解。
注意：若未提供props定义，Qoder可能生成any类型或遗漏required校验，导致运行时props缺失报错。
指定状态与副作用行为
写出关键交互动作及预期响应。例如：“输入时防抖300ms触发搜索；点击用户项后，调用onUserSelect回调并清空输入框；加载中显示“搜索中…”文本，不可点击按钮。”
这一步必须绑定具体数值和条件，不能写“适当防抖”或“显示加载状态”——Qoder无法解析模糊副词，会跳过实现或用setTimeout(0)模拟异步，造成实际卡顿。
方法三：用“当……就……”句式强制行为映射。例如：“当用户按下Enter键时，就立即执行搜索，不等待防抖结束。”这样能覆盖键盘交互路径，避免只实现鼠标点击而遗漏快捷键。
