步骤条React实现

React 实现步骤条的方法

使用 React 实现步骤条可以通过多种方式完成，以下是几种常见的方法：

使用状态管理控制步骤

通过 React 的 useState 钩子管理当前步骤的状态，动态渲染步骤条的进度和内容。

import React, { useState } from 'react';

const Steps = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const steps = ['Step 1', 'Step 2', 'Step 3'];

  return (
    <div>
      <div className="step-container">
        {steps.map((step, index) => (
          <div
            key={index}
            className={`step ${currentStep > index ? 'completed' : ''} ${currentStep === index + 1 ? 'active' : ''}`}
          >
            {step}
          </div>
        ))}
      </div>
      <button onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}>Previous</button>
      <button onClick={() => setCurrentStep(Math.min(steps.length, currentStep + 1))}>Next</button>
    </div>
  );
};

使用第三方库

可以借助现成的 React 组件库（如 antd 或 material-ui）快速实现步骤条功能。

import React from 'react';
import { Steps, Button } from 'antd';

const { Step } = Steps;

const App = () => {
  const [current, setCurrent] = React.useState(0);

  return (
    <>
      <Steps current={current}>
        <Step title="Step 1" />
        <Step title="Step 2" />
        <Step title="Step 3" />
      </Steps>
      <Button onClick={() => setCurrent(current - 1)}>Previous</Button>
      <Button onClick={() => setCurrent(current + 1)}>Next</Button>
    </>
  );
};

自定义样式和动画

通过 CSS 和过渡效果增强步骤条的交互体验。

import React, { useState } from 'react';
import './Steps.css';

const CustomSteps = () => {
  const [activeStep, setActiveStep] = useState(0);
  const steps = ['Setup', 'Configuration', 'Finish'];

  return (
    <div className="custom-steps">
      {steps.map((label, index) => (
        <div
          key={index}
          className={`step ${index === activeStep ? 'active' : ''}`}
          onClick={() => setActiveStep(index)}
        >
          <div className="step-circle">{index + 1}</div>
          <div className="step-label">{label}</div>
        </div>
      ))}
    </div>
  );
};

对应的 CSS 文件（Steps.css）可以定义步骤条的外观和动画效果。

.custom-steps {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

.step.active .step-circle {
  background-color: #1890ff;
  color: white;
}

.step-label {
  font-size: 14px;
}

动态内容切换

根据当前步骤动态渲染不同的内容区域。

const StepContent = ({ step }) => {
  switch (step) {
    case 1:
      return <div>Content for Step 1</div>;
    case 2:
      return <div>Content for Step 2</div>;
    case 3:
      return <div>Content for Step 3</div>;
    default:
      return null;
  }
};

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

  return (
    <div>
      <Steps currentStep={currentStep} />
      <StepContent step={currentStep} />
      <button onClick={() => setCurrentStep(currentStep - 1)} disabled={currentStep === 1}>
        Previous
      </button>
      <button onClick={() => setCurrentStep(currentStep + 1)} disabled={currentStep === 3}>
        Next
      </button>
    </div>
  );
};

以上方法可以根据具体需求选择或组合使用，灵活实现步骤条功能。