React中基于按钮的条件渲染：实现多步骤组件切换

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

// 为了示例可运行，我们假设这些是简单的组件：
// const Step1 = () => <div style={{padding: '20px', border: '1px solid blue'}}>这是第一步的内容</div>;
// const Step2 = () => <div style={{padding: '20px', border: '1px solid green'}}>这是第二步的内容</div>;
// const Step3 = () => <div style={{padding: '20px', border: '1px solid orange'}}>这是第三步的内容</div>;
// const Step4 = () => <div style={{padding: '20px', border: '1px solid red'}}>这是第四步的内容</div>;

const Activation = () => {
  // 使用 useState 管理当前激活的步骤编号，初始值为 1
  const [currentStep, setCurrentStep] = useState(1);

  // ... (事件处理函数和渲染逻辑)
};

const Activation = () => {
  const [currentStep, setCurrentStep] = useState(1);

  // 处理“下一步”按钮点击事件
  const handleNext = () => {
    // 确保步骤编号不超过最大值（这里是4）
    if (currentStep < 4) {
      setCurrentStep(currentStep + 1); // 正确地更新状态
    }
  };

  // 处理“返回”按钮点击事件
  const handleReturn = () => {
    // 确保步骤编号不小于最小值（这里是1）
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1); // 正确地更新状态
    }
  };

  // ... (渲染逻辑)
};

const Activation = () => {
  const [currentStep, setCurrentStep] = useState(1);

  const handleNext = () => {
    if (currentStep < 4) {
      setCurrentStep(currentStep + 1);
    }
  };

  const handleReturn = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1);
    }
  };

  return (
    <div className="activation-container"> {/* 添加一个包裹元素 */}
      <div className='modal-steps'>
        {/* 根据 currentStep 的值条件渲染对应的组件 */}
        {currentStep === 1 && <Step1 />}
        {currentStep === 2 && <Step2 />}
        {currentStep === 3 && <Step3 />}
        {currentStep === 4 && <Step4 />}
      </div>

      <div className='modal-activation-controls'>
        {/* “返回”按钮，当在第一步时禁用 */}
        <button
          className='return'
          onClick={handleReturn}
          disabled={currentStep === 1} // 当在第一步时禁用“返回”按钮
        >
          返回
        </button>
        {/* “下一步”按钮，当在最后一步时禁用 */}
        <button
          className='next-step'
          onClick={handleNext}
          disabled={currentStep === 4} // 当在最后一步时禁用“下一步”按钮
        >
          下一步
        </button>
      </div>
    </div>
  );
};

export default Activation;