在 React 项目中使用 Cursor 开发时，建议将重复的表单处理逻辑统一抽离为通用的 EditableField 组件：先定义 EditableProps 接口，再借助 Cursor AI 生成受控组件，按照 type 分发不同渲染器，结合 Rules 约束组件行为，最后通过 Visual Editor 完成验证与调优。
用 Cursor 开发 React 项目时，遇到重复出现的表单字段、编辑状态切换逻辑、校验提示等场景，最好抽离成可复用的通用组件。这样不仅能减少重复开发，还能避免每个页面都单独维护一套编辑器逻辑，或为每种字段类型反复复制渲染代码，从而提升 React 组件封装效率与项目可维护性。
第一步：明确封装边界与输入契约
打开 Cursor 编辑器，在项目根目录新建 src/components/EditableField 文件夹。不要急着直接编写组件，建议先创建 EditableField.types.ts，因为这是后续 AI 代码生成、TypeScript 类型推导以及组件复用的基础。
在该文件中定义核心接口：type EditableProps
【必须导出且命名规范】 接口名称必须以 Props 结尾，泛型参数也要使用 T，否则 Cursor 的 TypeScript 插件可能无法正确识别并自动补全 props 类型，这会影响后续 React 通用组件的生成效果。
第二步：用自然语言驱动AI生成骨架
右键点击 EditableField 文件夹 → “Ask Cursor about this folder”，输入提示词：
“请以一名拥有 5 年 React 与 TypeScript 实战经验的前端架构师视角，基于 EditableProps 接口实现一个通用的受控编辑组件。组件需支持双击切换到编辑状态，在失焦或按下回车后提交；同时兼容 text、number、date、select 四种 type。若为 select 类型，需要接收 options 属性并渲染下拉选项；所有输入控件都应绑定 placeholder 与 disabled 状态；当出现错误时，需展示红色边框，并在下方输出对应的提示文案。”
等待 Cursor 输出完整的组件文件内容（包括 EditableField.tsx 和相关 hooks），尽量不要手动改动整体结构，因为 AI 会按照接口契约自动补齐类型校验、受控逻辑和基础交互，这也是 Cursor 生成 React 表单组件时的优势所在。
第三步：注册渲染器插件系统
在 EditableField.tsx 同级新建 renderers/ 目录，并执行以下操作：
第一步可以先让 Cursor 补全基础渲染器：定位到空白的 renderers/TextRenderer.tsx 文件后，直接输入指令“生成一个纯文本输入渲染器，接收 value、onChange、placeholder、disabled，使用 Tailwind 样式，聚焦时加 border-blue-500，错误时加 border-red-500”。
这样可以优先搭建文本输入组件的基础结构、样式表现与交互状态，便于后续扩展其他字段类型。
方法二：复用已有组件
如果项目中已经存在 NumberInput 组件，可以直接在 renderers/index.ts 中导出：export { default as NumberRenderer } from '@/components/NumberInput'; —— Cursor 通常会自动识别引用路径，并完成相应的类型对齐与组件接入。
方法三：动态加载渲染器
在主组件内使用 const Renderer = renderers[type] || renderers.text; 进行分发，【type 值必须严格匹配字符串字面量】，例如传入 'NUMBER' 会导致运行时报错，正确写法只能是 'number'。这一点在封装 React 动态表单组件时尤其关键。
第四步：配置 Rules 锁定组件行为规范
进入项目根目录，确认存在 .cursor/rules/react-editable.mdc 文件。若不存在，就新建该文件并填入：
---
description: "通用编辑组件强制规则"
globs: ["src/components/EditableField/**"]
---
- 所有渲染器必须接收 value 和 onChange 两个必传 prop
- 编辑态必须触发 onBlur 和 onKeyDown(Enter) 双提交机制
- 错误状态必须通过 isValid prop 控制，不可依赖内部 useState
- 不得在组件内发起 API 请求或访问 localStorage
保存后重启 Cursor，之后再对该目录下的任意文件发起提问时，AI 会自动遵循这些规则，避免继续生成带副作用的代码，也能让 React 通用组件的行为更加统一和可控。
第五步：用 Visual Editor 快速验证与微调
启动本地开发服务器 → 在浏览器中打开包含
步骤一：双击页面中的编辑区域，触发编辑状态
步骤二：在右侧 Props 面板中修改 value 值，观察页面实时渲染变化
步骤三：勾选 disabled 复选框，确认输入框变灰且无法交互
步骤四：手动在输入框中输入非法字符（例如给 number 类型输入字母），验证错误边框是否正常显示
全部调整完成后，点击 “Apply Changes”，Cursor 会自动将可视化操作回写为 JSX 代码，无需再手动编写 class 或 style。这种方式非常适合用于 React 组件封装后的快速验证与细节优化。