React如何通过按钮点击实现多步骤组件条件渲染切换

核心实现逻辑是通过React状态记录当前激活的步骤序号，基于序号做条件渲染，保证同一时间只渲染当前激活的单个步骤组件，再给按钮绑定事件修改状态值完成切换。

可直接运行的完整代码 #

import { useState } from 'react'
import Step1 from './steps/Step1'
import Step2 from './steps/Step2'
import Step3 from './steps/Step3'
import Step4 from './steps/Step4'

const Activation = () => {
  // 默认索引为0，对应第一个步骤Step1
  const [currentStep, setCurrentStep] = useState(0)
  // 按顺序把所有步骤组件存入数组，索引和步骤一一对应
  const stepList = [<Step1 />, <Step2 />, <Step3 />, <Step4 />]
  // 总步骤数，用来做边界判断
  const totalSteps = stepList.length

  // 下一步按钮逻辑
  const handleNext = () => {
    if (currentStep < totalSteps - 1) {
      setCurrentStep(prev => prev + 1)
    }
  }

  // 返回上一步按钮逻辑
  const handleReturn = () => {
    if (currentStep > 0) {
      setCurrentStep(prev => prev - 1)
    }
  }

  return (
    <>
      <div className='modal-steps'>
        {/* 只渲染当前索引匹配的步骤组件，其余组件不会被挂载，自然隐藏 */}
        {stepList[currentStep]}
      </div>

      <div className='modal-activation'>
        <button 
          className='next-step' 
          onClick={handleNext}
          // 到最后一步时禁用下一步按钮，可选优化
          disabled={currentStep === totalSteps - 1}
        > 
          Next 
        </button>
        <button 
          className='return' 
          onClick={handleReturn}
          // 在第一步时禁用返回按钮，可选优化
          disabled={currentStep === 0}
        > 
          Return 
        </button>
      </div>
    </>
  )
}

export default Activation

注意：原代码return里返回了两个并列的div根节点，需要用Fragment（也就是代码里的<>空标签）包裹，否则会报JSX语法错误。

关键逻辑说明 #

• 状态值currentStep和步骤组件数组的索引一一对应：0对应Step1、1对应Step2，以此类推，初始值设为0满足默认展示Step1的需求
• 点击按钮时只修改currentStep的数值，React会自动重新渲染组件，仅把匹配当前索引的步骤挂载到页面上，其余步骤不会渲染，天然满足“同一时间仅展示单个组件”的要求
• 事件里加了边界判断：在第一步时点击返回、最后一步时点击下一步都不会触发状态修改，避免出现索引越界匹配不到组件的报错
• 可选加的disabled属性可以在步骤到边界时禁用对应按钮，优化交互体验

内容的提问来源于stack exchange，提问作者Vrag