基于React和antd实现自定义进度条的示例代码
一、技术选型与准备
我们选用了广受欢迎的 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 组件，成功构建了一个既具备动态进度更新功能，又拥有丰富信息提示的自定义进度条。在实际项目中，可根据具体需求进一步拓展其功能，比如添加更多的进度条样式、响应不同的交互事件等，使其更好地服务于各类业务场景。
以上就是基于React和antd实现自定义进度条的示例代码的详细内容，更多关于React antd自定义进度条的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了React实现动态调用的弹框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
本篇文章主要介绍了react redux入门示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了react应用中的DOM DIFF算法，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下2021-04-04
本文主要介绍了React实现前端选区的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了使用Node搭建reactSSR服务端渲染架构,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。 自定义hook是一个从use开始的调用其他hook的Javascript函数，下面看下react中创建自定义hooks的相关知识，感兴趣的朋友一起看看吧2021-11-11
本篇文章主要介绍了react实现菜单权限控制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
React源码分析之useCallback与useMemo及useContext详解
这篇文章主要介绍了React useCallback与useMemo及useContext源码分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结，感兴趣的朋友跟随小编一起看看吧2019-05-05
Redux是JavaScript状态容器，提供可预测化的状态管理，今天通过本文给大家分享redux在react中使用及配置redux到react项目中的方法，感兴趣的朋友跟随小编一起看看吧2021-06-06
最新评论