当前位置：首页 > React

react实现步骤条

2026-01-26 19:41:32React

实现步骤条的基本思路

在React中实现步骤条通常需要管理当前步骤状态，并通过条件渲染或样式变化展示不同步骤的进度。以下是两种常见实现方式：

使用状态管理当前步骤

定义一个状态变量来跟踪当前活跃的步骤，通过点击或逻辑控制更新该状态：

import { useState } from 'react';

function Stepper() {
  const [activeStep, setActiveStep] = useState(0);
  const steps = ['Step 1', 'Step 2', 'Step 3'];

  return (
    <div>
      <div className="stepper">
        {steps.map((step, index) => (
          <div 
            key={index}
            className={`step ${index === activeStep ? 'active' : ''}`}
            onClick={() => setActiveStep(index)}
          >
            {step}
          </div>
        ))}
      </div>
      <div className="step-content">
        {steps[activeStep]}
      </div>
    </div>
  );
}

结合进度条样式

通过CSS实现视觉进度效果，动态计算进度条宽度：

function ProgressStepper() {
  const [currentStep, setCurrentStep] = useState(1);
  const totalSteps = 4;

  const progressWidth = ((currentStep - 1) / (totalSteps - 1)) * 100;

  return (
    <div className="progress-container">
      <div className="progress-bar" style={{ width: `${progressWidth}%` }} />
      {[...Array(totalSteps)].map((_, i) => (
        <div 
          key={i}
          className={`step-circle ${i < currentStep ? 'completed' : ''}`}
          onClick={() => setCurrentStep(i + 1)}
        >
          {i + 1}
        </div>
      ))}
    </div>
  );
}

样式示例（CSS）

配合上述组件的样式建议：

.stepper {
  display: flex;
  justify-content: space-between;
}

.step {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.step.active {
  background-color: #007bff;
  color: white;
}

.progress-container {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.progress-bar {
  position: absolute;
  height: 4px;
  background: #007bff;
  top: 15px;
  z-index: -1;
  transition: width 0.3s;
}

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.step-circle.completed {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

高级实现方案

对于复杂需求，可考虑以下优化：

使用Context或状态管理工具（如Redux）共享步骤状态
添加步骤验证逻辑
实现垂直方向步骤条
集成路由（如React Router）实现URL同步

import { useStepper } from './stepperContext';

function ControlledStepper() {
  const { nextStep, prevStep, currentStep } = useStepper();

  return (
    <div>
      {/* 步骤指示器 */}
      {/* 步骤内容 */}
      <button onClick={prevStep}>上一步</button>
      <button onClick={nextStep}>下一步</button>
    </div>
  );
}

react实现步骤条