快捷導(dǎo)航

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

更新時(shí)間：2025年03月26日 09:21:23 作者：五號(hào)廠房

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

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

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

二、組件的核心邏輯

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

首先，定義一個(gè)名為 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" },
  ]);

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

（二）動(dòng)態(tài)更新機(jī)制

為了讓進(jìn)度條能夠自動(dòng)推進(jìn)，使用 useEffect 鉤子函數(shù)來(lái)處理副作用：

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

三、組件的渲染呈現(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={`巖石類(lèi)型: ${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;

顯示效果：

綜上所述，通過(guò)以上步驟，利用 React 結(jié)合 antd 的 Tooltip 組件，成功構(gòu)建了一個(gè)既具備動(dòng)態(tài)進(jìn)度更新功能，又擁有豐富信息提示的自定義進(jìn)度條。在實(shí)際項(xiàng)目中，可根據(jù)具體需求進(jìn)一步拓展其功能，比如添加更多的進(jìn)度條樣式、響應(yīng)不同的交互事件等，使其更好地服務(wù)于各類(lèi)業(yè)務(wù)場(chǎng)景。

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

您可能感興趣的文章: