React 中使用按钮实现条件渲染与多步组件导航

import { useState } from "react";
// 假设 Step1, Step2, Step3, Step4 是你的独立组件
import Step1 from './steps/Step1';
import Step2 from './steps/Step2';
import Step3 from './steps/Step3';
import Step4 from './steps/Step4';

const Activation = () => {
  // num 存储当前步骤的编号，setNum 是更新 num 的函数
  const [num, setNum] = useState(1); // 默认显示第一个步骤
  // ... 其他代码

  const handleNextStep = () => {
    // 只有当当前步骤小于总步数（这里是4）时才允许前进
    if (num < 4) {
      setNum(num + 1); // 正确更新状态的方式
    }
  };

  const handlePreviousStep = () => {
    // 只有当当前步骤大于1时才允许返回
    if (num > 1) {
      setNum(num - 1); // 正确更新状态的方式
    }
  };

  return (
    <div className='modal-container'> {/* 建议添加一个外层容器 */}
      <div className='modal-steps'>
        {num === 1 && <Step1 />}
        {num === 2 && <Step2 />}
        {num === 3 && <Step3 />}
        {num === 4 && <Step4 />}
      </div>

      <div className='modal-activation'>
        <button className='return' onClick={handlePreviousStep} disabled={num === 1}>
          返回
        </button>
        <button className='next-step' onClick={handleNextStep} disabled={num === 4}>
          下一步
        </button>
      </div>
    </div>
  );
};

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 Activation = () => {
  // 使用 useState Hook 管理当前显示的步骤编号
  const [num, setNum] = useState(1); // 默认从步骤1开始

  // 处理“下一步”按钮点击事件
  const handleNextStep = () => {
    // 确保不会超出最大步骤数
    if (num < 4) {
      setNum(num + 1); // 更新状态到下一个步骤
    }
  };

  // 处理“返回”按钮点击事件
  const handlePreviousStep = () => {
    // 确保不会小于最小步骤数
    if (num > 1) {
      setNum(num - 1); // 更新状态到上一个步骤
    }
  };

  return (
    // 外层容器，确保 JSX 返回一个单一的根元素
    <div className='activation-flow-container'>
      {/* 动态显示当前步骤的组件 */}
      <div className='modal-steps'>
        {num === 1 && <Step1 />}
        {num === 2 && <Step2 />}
        {num === 3 && <Step3 />}
        {num === 4 && <Step4 />}
      </div>

      {/* 导航按钮区域 */}
      <div className='modal-activation-controls'>
        <button
          className='return-button'
          onClick={handlePreviousStep}
          disabled={num === 1} // 在第一步时禁用“返回”按钮
        >
          返回
        </button>
        <button
          className='next-step-button'
          onClick={handleNextStep}
          disabled={num === 4} // 在最后一步时禁用“下一步”按钮
        >
          下一步
        </button>
      </div>
    </div>
  );
};

export default Activation;