React：如何在 5 分钟内创建自定义进度条组件
结论
原文发布于我的个人博客
几天前，我在开发一个使用非常流行的 UI 库的 React 项目时，遇到了一个问题：我需要修改进度条组件的样式。但几个小时的摸索之后，我彻底绝望了（为什么它不像文档里写的那样工作？？？），我决定从头开始创建一个进度条组件。以下是我的实现过程。
1. 创建 progress-bar.component.js 文件
import React from "react";
const ProgressBar = (props) => {
const { bgcolor, completed } = props;
return (
<div>
<div>
<span>{`${completed}%`}</span>
</div>
</div>
);
};
export default ProgressBar;
该组件主要由两部分组成：
- 主父级 div 容器——代表整个栏
- 子 div - 带有 span 的进度条的已完成部分，将显示已完成百分比数字。
我们的自定义进度条组件只会接收两个属性：
- bgcolor - 已完成部分的条形背景颜色
- 已完成- 0 到 100 之间的数字
2. 添加样式
为了本教程的演示，我将使用纯内联 CSS 来实现样式。另一种选择是使用styled-components库，但我们为了简单起见，还是使用内联 CSS 吧。
const ProgressBar = (props) => {
const { bgcolor, completed } = props;
const containerStyles = {
height: 20,
width: '100%',
backgroundColor: "#e0e0de",
borderRadius: 50,
margin: 50
}
const fillerStyles = {
height: '100%',
width: `${completed}%`,
backgroundColor: bgcolor,
borderRadius: 'inherit',
textAlign: 'right'
}
const labelStyles = {
padding: 5,
color: 'white',
fontWeight: 'bold'
}
return (
<div style={containerStyles}>
<div style={fillerStyles}>
<span style={labelStyles}>{`${completed}%`}</span>
</div>
</div>
);
};
export default ProgressBar;
没什么特别的，主要是背景颜色和边框圆角。
让我们测试一下我们开发的东西。
import React from "react";
import "./App.css";
import ProgressBar from "./progress-bar.component";
const testData = [
{ bgcolor: "#6a1b9a", completed: 60 },
{ bgcolor: "#00695c", completed: 30 },
{ bgcolor: "#ef6c00", completed: 53 },
];
function App() {
return (
<div className="App">
{testData.map((item, idx) => (
<ProgressBar key={idx} bgcolor={item.bgcolor} completed={item.completed} />
))}
</div>
);
}
export default App;
运行应用程序，并在浏览器中查看我们得到了什么。
就这样！简单的 React 进度条组件就完成了！
额外功能：添加动画。
实际上，要实现进度条动画，只需在fillerStyles中添加一行代码即可：
const fillerStyles = {
...
transition: 'width 1s ease-in-out',
...
}
为了演示动画效果，我将创建一个函数，该函数每 2 秒随机生成一次完成的 prop 值。该函数将放置在useEffect钩子函数中。
function App() {
const [completed, setCompleted] = useState(0);
useEffect(() => {
setInterval(() => setCompleted(Math.floor(Math.random() * 100) + 1), 2000);
}, []);
return (
<div className="App">
<ProgressBar bgcolor={"#6a1b9a"} completed={completed} />
</div>
);
}
这就是最终结果：
结论
就是这样！在这篇简短的博文中，我详细介绍了创建自定义 React 进度条组件的步骤。该组件完全可定制，因此您可以根据项目需求添加任何其他样式和功能。
该组件的完整源代码可在此 GitHub 仓库中找到。
此外，您还可以将此组件（支持 TypeScript）作为npm 包使用。
文章来源：https://dev.to/ramonak/react-how-to-create-a-custom-progress-bar-component-in-5-minutes-2lcl