核心是用状态变量记录当前步骤，再结合条件判断决定渲染哪一阶段、按钮行为和下一步逻辑；即以 step 状态驱动视图与流程，通过条件渲染、动态按钮逻辑和共享 formData 实现轻量可控的多阶段表单向导。
用分支控制实现多阶段表单向导跳转，核心是**用状态变量记录当前步骤，再结合条件判断决定渲染哪一阶段、按钮行为和下一步逻辑**，而不是靠多个独立页面或复杂路由。关键不在“跳转”本身，而在“状态驱动视图+受控流程”。
用一个 step 状态统一管理当前阶段
定义一个数字或字符串状态（如 step = 1），代表当前处于第几页。所有 UI 渲染、按钮文案、下一步/上一步逻辑都基于它计算：
- 步骤 1：收集基础信息（姓名、邮箱）
- 步骤 2：选择服务类型（单选/多选）
- 步骤 3：确认并提交（显示摘要 + 提交按钮）
组件顶层只需维护一个 useState('step1') 或 useState(1)，后续所有分支都围绕它展开。
用条件渲染控制每一步的表单内容
不要写三个独立组件再手动切换，而是用 if / else if / else 或 switch 渲染对应阶段的 JSX：
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
if (step === 1) return <StepOne onSubmit={next} />;
else if (step === 2) return <StepTwo onSubmit={next} onBack={prev} />;
else if (step === 3) return <StepThree data={formData} onBack={prev} onSubmit={handleSubmit} />;每个子组件只专注本阶段的字段校验和数据收集，通过回调函数把数据传回主组件聚合（例如用 setFormData({...prev, ...newData})）。
按钮行为由当前 step 决定，而非硬编码跳转
“下一步”按钮不固定跳到 step2，而是根据当前 step 动态计算下一个值，并做校验：
- 点击“下一步”时，先运行当前步的校验（如邮箱格式、必填项）
- 校验失败：阻止 step 变更，提示错误
- 校验通过：执行 setStep(prev => Math.min(prev + 1, 3))
“上一步”同理：setStep(prev => Math.max(prev - 1, 1))，避免越界。不需要手写 history.push() 或 router.push()，纯状态驱动。
支持非线性流程（如跳过、回退后重填）
分支控制的价值在于灵活应对业务变化。例如：
- 用户在 step2 选了“无需服务”，可直接 setStep(3) 跳到确认页
- 从 step3 点“修改信息”，可 setStep(1) 并保留已填数据（因 formData 是共享的）
- 某步校验依赖前几步结果（如 step2 的选项影响 step3 的字段），就在对应 step 的校验函数里读取 formData 全局状态
这种跳转不是 URL 变化，而是视图响应状态更新——更轻量、更可控、更容易测试。
