当前位置：首页 > React

react实现steps步骤条

2026-01-27 17:13:56React

React 实现 Steps 步骤条

在 React 中实现 Steps 步骤条可以通过多种方式完成，以下是一种常见的实现方法：

使用 Ant Design 的 Steps 组件

Ant Design 提供了一个现成的 Steps 组件，可以快速实现步骤条功能。

安装 Ant Design：

npm install antd

引入 Steps 组件并使用：

react实现steps步骤条

import { Steps } from 'antd';
const { Step } = Steps;

function App() {
  return (
    <Steps current={1}>
      <Step title="第一步" description="填写基本信息" />
      <Step title="第二步" description="验证身份" />
      <Step title="第三步" description="完成注册" />
    </Steps>
  );
}

export default App;

自定义 Steps 组件

如果需要完全自定义 Steps 组件，可以手动实现：

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

function CustomSteps({ steps, currentStep }) {
  return (
    <div className="steps-container">
      {steps.map((step, index) => (
        <div
          key={index}
          className={`step ${index <= currentStep ? 'active' : ''}`}
        >
          <div className="step-number">{index + 1}</div>
          <div className="step-title">{step.title}</div>
          <div className="step-description">{step.description}</div>
        </div>
      ))}
    </div>
  );
}

function App() {
  const [currentStep, setCurrentStep] = useState(0);
  const steps = [
    { title: '第一步', description: '填写基本信息' },
    { title: '第二步', description: '验证身份' },
    { title: '第三步', description: '完成注册' },
  ];

  return (
    <div>
      <CustomSteps steps={steps} currentStep={currentStep} />
      <button onClick={() => setCurrentStep(currentStep + 1)}>下一步</button>
    </div>
  );
}

export default App;

对应的 CSS 文件：

react实现steps步骤条

.steps-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.step {
  flex: 1;
  text-align: center;
  position: relative;
}

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

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

.step-title {
  font-weight: bold;
}

.step-description {
  color: #666;
  font-size: 14px;
}

使用 Material-UI 的 Stepper 组件

Material-UI 也提供了 Stepper 组件：

安装 Material-UI：

npm install @mui/material @emotion/react @emotion/styled

引入并使用 Stepper：

import React from 'react';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';

function App() {
  const steps = ['第一步', '第二步', '第三步'];
  const [activeStep, setActiveStep] = React.useState(0);

  return (
    <div>
      <Stepper activeStep={activeStep}>
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      <button onClick={() => setActiveStep(activeStep + 1)}>下一步</button>
    </div>
  );
}

export default App;

以上方法提供了从简单到复杂的多种实现方式，可以根据项目需求选择合适的方案。