要高效使用CodeGeeX生成规范React组件，需：一、用自然语言精准描述需求并含组件类型、props等；二、提供上下文代码引导风格一致；三、多轮对话迭代优化细节；四、在提示中嵌入ESLint/Prettier规则；五、用CLI批量生成骨架。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您希望使用CodeGeeX高效生成符合规范的React组件，但不确定如何正确触发提示、组织输入或调整输出结构，则可能是由于未掌握其对React语法与项目上下文的识别要点。以下是实现React组件快速开发的具体操作路径：
一、使用自然语言精准描述组件需求
CodeGeeX依赖清晰、结构化的自然语言指令来理解组件功能、UI结构及交互逻辑。模糊或过于宽泛的描述会导致生成代码缺乏可复用性或不符合当前项目约定。
1、在CodeGeeX编辑器或IDE插件中新建一个以.jsx或.tsx为后缀的空白文件。
2、在光标处输入类似“创建一个带标题、描述和点击回调的卡片组件，使用函数组件和React Hooks”的中文指令。
立即学习“前端免费学习笔记（深入）”；
3、确保指令中包含组件类型（函数组件/类组件）、关键props（如title、onClick）、样式倾向（如内联style或className）等必要信息。
4、按下快捷键（如Ctrl+Enter或Cmd+Enter）触发补全，等待CodeGeeX生成完整组件代码块。
二、提供已有代码片段作为上下文引导
当组件需与现有代码风格或状态管理方式保持一致时，仅靠自然语言可能无法准确还原上下文。将相关Hook调用、CSS模块路径或父组件传入的props类型粘贴至提示前，可显著提升生成准确性。
1、复制当前项目中已使用的useEffect调用示例或PropTypes定义片段。
2、在CodeGeeX输入框顶部先粘贴该片段，换行后接续输入“基于以上写法，生成一个带加载状态的按钮组件”。
3、确认生成结果中useEffect、useState的调用方式与项目中其他组件一致。
4、检查返回的JSX是否引用了项目中已配置的Button.module.css路径或主题色变量。
三、通过多轮对话迭代优化组件细节
单次生成往往无法覆盖所有边界情况或设计约束。利用CodeGeeX支持的连续对话能力，可对初始输出进行针对性修正，避免从头重写。
1、接收首次生成的组件代码后，选中其中JSX部分并右键选择“让CodeGeeX继续编写”。
CodeGeeX 2.21.0是智谱AI推出的AI编程助手版本，对Inline Chat功能进行了重大优化，包括UI设计升级、支持流式输出以提升响应速度，并新增“查看思路”按钮以便理解代码原理。同时，该版本在编辑器中新增CodeLens控件，支持一键“解释”代码或“添加注释”。目前该工具对个人开发者免费开放。
2、输入补充指令，例如“将按钮文字改为‘提交表单’，禁用状态时显示加载图标，并使用React Icons中的FaSpinner”。
3、再次触发补全，观察CodeGeeX是否自动导入FaSpinner并更新条件渲染逻辑。
4、若未自动添加import语句，手动在文件顶部插入import { FaSpinner } from 'react-icons/fa'后，再次请求补全样式部分。
四、结合ESLint与Prettier规则预设提示词
CodeGeeX能响应对代码质量工具规则的显式要求。在指令中声明项目启用的校验规则，可减少后续格式化与修复工作量。
1、在提示中加入“遵循Airbnb React规范，禁止使用var声明，props必须使用解构赋值”等约束条件。
2、确认生成代码中无隐式any类型（TypeScript场景下），且props解构未遗漏required属性。
3、检查是否避免了内联箭头函数作为事件处理器（如onClick={() => doSomething()}），而是采用useCallback包裹。
4、验证className命名是否符合BEM或项目约定，而非使用随机字符串或驼峰混合写法。
五、利用CodeGeeX CLI批量生成组件骨架
对于需要统一结构的组件集合（如一组数据展示卡片），可通过命令行工具配合模板指令一次性生成多个文件，避免重复人工操作。
1、在项目根目录打开终端，执行codegeex generate --template react-component --name UserProfileCard。
2、确认CLI是否根据--name参数自动生成UserProfileCard.jsx、UserProfileCard.test.jsx及对应样式文件。
3、查看生成的组件是否默认包含propTypes定义（JavaScript项目）或interface声明（TypeScript项目）。
4、检查测试文件是否已预置render + screen.getByText基础断言，且覆盖率注释标记为// TODO: add more tests。
