如何在 React 中构建一个简单的进度条

进度条是一个简单但功能强大的 UI 元素。上周，我为一个无债务计算器项目创建了自己的项目，并意识到我有多么认为它们是理所当然的。当有关进度的信息对用户很重要时（例如在程序加载时或偿还贷款时），没有什么比使用不起眼的进度条更好的方式来传达该信息了。

我相信你可以在 npm 或其他地方找到很多包含预制进度条的包。但是，如果您想加深对这些常见元素的理解，没有比自己制作更好的方法了。

基本设置

首先，您需要一个“空”组件。空，我当然是指一个带有样板的 JSX 文件，如下所示：

您还需要一个正确链接的 CSS 文件来控制进度条的外观。

基本功能

为简单起见，让我们从构建进度条工作所需的绝对最少代码开始。进度条有两个基本部分：

1. 酒吧本身。 虽然它可以有多种形式（并不总是一个条形图），但它是增长和缩小以指示进度水平的部分。
2. 参考框架。 每个进度条都从起点开始（进度为 0%），然后向终点增长（进度为 100%）。如果没有某种静态框架或背景让条“生活”在其中，用户很难判断条已经走了多远，或者它必须走多远。

我们可以用两个简单的 div 来描述这两个部分，一个嵌套在另一个内部。

我们将使用刚刚创建的类名在 CSS 中进行一些基本的样式设置。这将使 div 实际可见。绝对定位使我们能够精确控制条形图如何适合背景。

如果您使用浏览器的开发者工具，您会发现您已经可以预览进度条的增长/收缩行为。只需设置栏 剩下 属性为 0 并尝试不同的百分比值 正确的 财产。

控制进度条

如果我们必须手动更改样式属性以使其增长和缩小，我们的栏就不是很有用。我们希望能够将其作为组件包含在任何应用程序中，将其传递给单个 进度值 在 0 和 1 之间，并让它正确显示该值。

为此，我们将结合使用道具和内联样式。首先，我们将使用解构来接收 进度值 来自外面的道具。

然后我们需要为酒吧建立一个字符串 正确的 财产。使用格式化的字符串使这变得简单。请注意，我们需要进行一些计算才能获得正确的值。由于我们的 进度值 介于 0 和 1 之间，我们将其乘以 100 以将其转换为百分比。在这之前，我们必须从 1 中减去它，因为 正确的 属性类型在这里反向工作。更小 正确的 百分比使酒吧更饱满，而不是更空。

构建字符串后，我们在栏的内联样式中使用它。当你在它的时候，也设置 剩下 属性为 0，将其固定到背景的边缘。

请注意，在 JSX 中，要使用内联样式，我们实际上传入了一个对象字面量，每个键对应于我们正在设置的 CSS 属性。这就是为什么有一对额外的花括号。

现在，如果你传入任何 进度值 在 0 和 1 之间作为该组件的道具，您将看到该栏正确显示该值。凉爽的！

提炼东西

风格

如果你问我，我们的进度条现在看起来有点难看。它的顶部和底部都有很大的空间，但侧面根本没有。而且由于我们使用的是绝对定位，因此向背景添加填充不会有太大作用。

我们可以通过引入另一个名为的道具来模拟填充 侧边距 并使用它来修改我们构造的字符串。我们还可以分配 侧边距 到 剩下 属性不变，因为我们不打算让条的左边缘移动。

请记住为此道具传递正确格式的字符串，例如 sidePadding="6px" .一点边界半径也不会受到伤害。

值处理

现在，如果我们的应用程序传入的值超出了 0 到 1 的范围，则进度条将延伸到背景范围之外。在大多数情况下，这是不受欢迎的行为。与其抛出错误，不如安静地处理这个问题，并将所有值简单地限制在我们想要的范围内。这样，即使我们得到一个完全错误的值，比如 23，我们的进度条仍然会显示 100%（而不是 2300%）。

JS 目前没有内置的clamp 函数，解释如何制作一个超出了本教程的范围。但是，如果您已经走到了这一步，那么您自己应该不会有太多麻烦。

类名作为道具

在不同的情况下，我们可能希望为进度条的各个部分分配不同的类。例如，当它低于 50% 时，条形可能会是红色的，而当它高于 50% 时，它会是绿色的。

我们可以通过接受 bar 类的 prop 并将其用于 班级名称 反而。当我们这样做的时候，我们也可以对背景做同样的事情。

我们的代码现在更加灵活了：

结果：

结论

如果您是 React 的初学者，希望本教程可以帮助您构建一个简单而通用的组件，您可以在各种项目中使用它——同时也让您了解如何自己构建其他类似的组件。

如果您比我更有经验（不需要太多），您如何看待我的解决方案？你会如何以不同的方式处理这个问题？现在我很难看出我可以如何让它更优雅，但我确信我还没有意识到还有改进的空间。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/40092/51133021