主题
高频面试题
如何为 React 表单组件设计包含上下文约束的 Prompt？
面试官希望看到你不仅会让模型写代码，还会给出项目上下文、依赖边界、交互细节和验收条件。
面试官角度分析，想考什么
- 什么叫上下文约束？
考察是否会描述项目环境、组件边界、依赖和现有规范。 - React 表单 Prompt 要关注哪些工程细节？
考察状态管理、校验、错误提示、提交和无障碍语义。 - 怎么避免生成“看起来能用但项目接不进去”的代码？
考察文件结构、props、类型、样式和 API 约束。 - 如何让模型输出可验证？
考察验收标准和测试要求。
可直接抄走的 30 秒参考答案
text
我会先给 React 项目上下文，比如 React 18、TypeScript、是否允许新增依赖、样式方案和组件接口。然后把字段、验证规则、触发时机、错误提示、提交 loading、失败处理和无障碍要求写清楚。最后规定输出文件、代码块和验收标准。这样模型生成的是能接入项目的组件，而不是一个孤立 demo。面试回答详解，知其所以然
“包含上下文约束”的意思是不要只描述功能，还要告诉模型代码要放进什么工程里。
1. 上下文约束包含什么
- 技术栈：React 版本、TypeScript、构建工具。
- 状态方案：本地 state、React Hook Form、Formik 或项目自研表单。
- 样式方案：CSS Modules、Tailwind、styled-components 或现有 design system。
- 组件接口：props、回调、默认值、禁用态。
- 业务边界：哪些字段可编辑，哪些由外部传入。
- 依赖限制：允许或禁止新增 npm 包。
2. 可直接使用的 Prompt
text
你是一个资深 React + TypeScript 前端工程师。请生成一个可复用的用户资料表单组件。
项目上下文：
- React 18 + TypeScript。
- 使用函数组件和 Hooks。
- 不新增第三方依赖，不使用 Formik / React Hook Form。
- 样式使用 CSS Modules，类名写在 UserProfileForm.module.css。
- 组件需要兼容现有项目的严格 TypeScript 配置。
组件接口：
- 组件名：UserProfileForm。
- props:
- initialValue?: { name: string; email: string; phone?: string; age?: number }
- submitting?: boolean
- onSubmit: (value: FormValue) => Promise<void> | void
- onCancel?: () => void
字段和验证：
- name：必填，2-30 个字符。
- email：必填，邮箱格式。
- phone：选填，如果填写必须是 11 位数字。
- age：选填，必须是 1-120 的整数。
交互要求：
- 用户提交时校验全部字段。
- 字段失焦后显示该字段错误。
- 提交失败时保留用户输入并展示顶部错误提示。
- submitting 为 true 时禁用所有输入和提交按钮。
- 每个输入框关联 label 和 aria-describedby。
输出要求：
- 输出两个代码块：UserProfileForm.tsx 和 UserProfileForm.module.css。
- 不要输出额外解释。
- TypeScript 类型要完整，不要使用 any。
验收标准：
- 空表单提交会显示必填错误。
- 邮箱、手机号、年龄错误都有对应中文提示。
- onSubmit 只在验证通过后调用。
- 组件不直接请求接口，由调用方通过 onSubmit 处理。3. 为什么要写 props 和依赖边界
如果不写 props，模型可能把接口请求、路由跳转、状态管理和 UI 样式全部写死在组件里。这样的代码演示能跑，但很难进入真实项目。
写清依赖边界后，模型知道自己只能生成组件内部状态和校验逻辑，不会擅自引入库或假设后端 API。
4. 验证和错误提示要细到触发时机
“需要表单验证”太粗。更可执行的表达是：
- 什么时候校验：输入时、失焦时、提交时。
- 错误展示在哪里：字段下方、顶部摘要、toast。
- 提交失败怎么处理：保留输入、展示错误、恢复按钮。
- 异步提交谁负责：组件内部还是父组件。
面试官追问3个问题
追问一：为什么不让组件自己调 API？
- 考察点：组件边界。
- 回答方向：可复用表单组件应通过
onSubmit交给调用方处理副作用，避免和具体接口、路由、状态管理耦合。
追问二：如何减少 AI 生成代码的类型问题？
- 考察点：TypeScript 约束表达。
- 回答方向：明确类型定义、禁止 any、给 props 和 form value 结构，并要求兼容 strict 模式。
追问三：如何让错误提示更稳定？
- 考察点：交互细节。
- 回答方向：明确错误触发时机、字段级错误文案、顶部错误摘要和提交失败恢复方式。
扩展知识
Prompt 里可以加入现有代码片段
如果项目已有按钮、输入框或表单样式，最好给模型一个小片段：
text
请模仿以下组件风格，但不要修改原组件：
...这样比抽象地说“符合项目风格”更有效。
适合加入测试要求的用例
- 必填校验。
- 格式校验。
- 提交成功。
- 提交失败。
- 禁用态。
- 键盘和 label 可访问性。