快捷導(dǎo)航

基于React和antd實現(xiàn)自定義進度條的示例代碼

更新時間：2025年03月26日 09:21:23 作者：五號廠房

在現(xiàn)代 Web 開發(fā)中,進度條是一種常見且實用的 UI 組件,用于直觀地向用戶展示任務(wù)的完成進度,本文將詳細(xì)介紹如何使用 React 來構(gòu)建一個自定義的進度條,它不僅能夠動態(tài)展示進度,還具備額外的信息提示功能,需要的朋友可以參考下

一、技術(shù)選型與準(zhǔn)備

我們選用了廣受歡迎的 React 框架作為核心開發(fā)工具，它提供了高效的組件化開發(fā)模式，讓代碼的組織與維護變得更加便捷。同時，為了實現(xiàn)一些精致的交互效果，引入了 Ant Design（簡稱 antd）庫中的 Tooltip 組件。Ant Design 是一套成熟的企業(yè)級 UI 設(shè)計語言和 React 組件庫，能夠助力我們快速搭建出美觀且功能強大的界面。

二、組件的核心邏輯

（一）狀態(tài)管理

首先，定義一個名為 BasedOnReactSelfDefinedProgressBar 的函數(shù)式 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 鉤子函數(shù)初始化了一個名為 progressData 的狀態(tài)變量，它存儲著進度條的關(guān)鍵信息。這個狀態(tài)是一個數(shù)組，數(shù)組中的每個元素都是一個對象，包含 percent（表示當(dāng)前片段的進度占比）和 color（用于區(qū)分不同類型，在后續(xù)示例中與巖石類型相關(guān)聯(lián)，紅色代表火成巖，綠色代表沉積巖）兩個屬性。初始狀態(tài)下，設(shè)定了各個片段具有相同的起始占比 10%。

（二）動態(tài)更新機制

為了讓進度條能夠自動推進，使用 useEffect 鉤子函數(shù)來處理副作用：

  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);
  }, []);

當(dāng)組件掛載時，創(chuàng)建一個定時器（setInterval），每隔 1 秒鐘觸發(fā)一次更新操作。在更新函數(shù)中，通過獲取前一狀態(tài) prev，對 progressData 數(shù)組中的每個元素進行處理。新的 percent 值是將當(dāng)前所有元素的 percent 之和加上 10，但使用 Math.min 確保最終結(jié)果不超過 100%，以符合進度條的實際意義。同時，為了避免內(nèi)存泄漏，在組件卸載時，通過返回的清除函數(shù) clearInterval(interval) 及時關(guān)閉定時器。

三、組件的渲染呈現(xiàn)

  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 結(jié)合 antd 的 Tooltip 組件，成功構(gòu)建了一個既具備動態(tài)進度更新功能，又擁有豐富信息提示的自定義進度條。在實際項目中，可根據(jù)具體需求進一步拓展其功能，比如添加更多的進度條樣式、響應(yīng)不同的交互事件等，使其更好地服務(wù)于各類業(yè)務(wù)場景。

以上就是基于React和antd實現(xiàn)自定義進度條的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于React antd自定義進度條的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: