基于 React+antd 实现的自定义进度条

在现代 Web 开发中，进度条是一种常见且实用的 UI 组件，用于直观地向用户展示任务的完成进度。本文将详细介绍如何使用 React 来构建一个自定义的进度条，它不仅能够动态展示进度，还具备额外的信息提示功能。

一、技术选型与准备

我们选用了广受欢迎的 React 框架作为核心开发工具，它提供了高效的组件化开发模式，让代码的组织与维护变得更加便捷。同时，为了实现一些精致的交互效果，引入了 Ant Design（简称 antd）库中的 Tooltip 组件。Ant Design 是一套成熟的企业级 UI 设计语言和 React 组件库，能够助力我们快速搭建出美观且功能强大的界面。

二、组件的核心逻辑

（一）状态管理

首先，定义一个名为 BasedOnReactSelfDefinedProgressBar 的函数式 React 组件：

import React, { useState, useEffect } from "react";
import { Tooltip } from "antd";

const BasedOnReactSelfDefinedProgressBar: React.FC = () => {
  const [progressData, setProgressData] = useState([
    { percent: 10, color: "red" },
    { percent: 10, color: "green" },
    { percent: 10, color: "red" },
    { percent: 10, color: "green" },
    { percent: 10, color: "green" },
  ]);

在这里，通过 useState 钩子函数初始化了一个名为 progressData 的状态变量，它存储着进度条的关键信息。这个状态是一个数组，数组中的每个元素都是一个对象，包含 percent（表示当前片段的进度占比）和 color（用于区分不同类型，在后续示例中与岩石类型相关联，红色代表火成岩，绿色代表沉积岩）两个属性。初始状态下，设定了各个片段具有相同的起始占比 10%。

（二）动态更新机制

为了让进度条能够自动推进，使用 useEffect 钩子函数来处理副作用：

  useEffect(() => {
    const interval = setInterval(() => {
      setProgressData(prev => 
        prev.map(item => ({
         ...item,
          percent: Math.min(prev.reduce((sum, cur) => sum + cur.percent, 0) + 10, 100)
        }))
      );
    }, 1000);
    return () => clearInterval(interval);
  }, []);

当组件挂载时，创建一个定时器（setInterval），每隔 1 秒钟触发一次更新操作。在更新函数中，通过获取前一状态 prev，对 progressData 数组中的每个元素进行处理。新的 percent 值是将当前所有元素的 percent 之和加上 10，但使用 Math.min 确保最终结果不超过 100%，以符合进度条的实际意义。同时，为了避免内存泄漏，在组件卸载时，通过返回的清除函数 clearInterval(interval) 及时关闭定时器。

三、组件的渲染呈现

  return (
    <div
      style={{
        width: "100%",
        height: "10px",
        background: "#e0e0e0",
        position: "relative",
        borderRadius: "10px",
        overflow: "hidden"
      }}
    >
      {progressData.map((item, index) => (
        <Tooltip 
          key={index} 
          title={`岩石类型: ${item.color === 'red'? '火成岩' : '沉积岩'}\n占比: ${item.percent}%`}
        >
          <div
            style={{
              width: `${100 / progressData.length}%`,
              height: "100%",
              background: item.color,
              position: "absolute",
              left: `${(100 / progressData.length) * index}%`,
              borderRadius: '5px',
              transition: 'width 0.3s ease'
            }}
          />
        </Tooltip>
      ))}
    </div>
  );
};

export default BasedOnReactSelfDefinedProgressBar;

显示效果：

综上所述，通过以上步骤，利用 React 结合 antd 的 Tooltip 组件，成功构建了一个既具备动态进度更新功能，又拥有丰富信息提示的自定义进度条。在实际项目中，可根据具体需求进一步拓展其功能，比如添加更多的进度条样式、响应不同的交互事件等，使其更好地服务于各类业务场景。