使用 React 和 Tailwind 的简单进度条组件

大家好，

最近我在开发一个功能，需要实现一个进度条。之前我一直很怕进度条（原因：不明😂）。我之前的项目大部分都用的是 Bootstrap，因为 Bootstrap 有自己的进度条组件，所以我不需要自己再创建一个进度条。

但幸运的是，我目前正在做的项目使用的是Tailwind，这意味着我必须自己创建一个进度条！起初我以为这会非常复杂，因为我必须处理很多状态等等。但最终它变成了一个非常小巧且相当简单的组件。

在本文中，我们将了解如何创建这个简单易用的进度条。这样下次我们就不需要任何库了！

让我们开始吧🚀

要构建进度条，我们只需要两部分。1-
我们需要一个外部 div 来显示完整的进度条。2-
内部 div 来显示进度。

让我们深入代码，理解一下！我们的进度条组件看起来会像这样：

const ProgressBar = ({ progressPercentage }) => {
    return (
        <div className='h-1 w-full bg-gray-300'>
            <div
                style={{ width: `${progressPercentage}%`}}
                className={`h-full ${
                    progressPercentage < 70 ? 'bg-red-600' : 'bg-green-600'}`}>
            </div>
        </div>
    );
};

这 4 行代码，你的基本进度条组件就准备好了。😇

从代码中可以看出，最外层的 div 就是完整的进度条。它一共有 3 个 class，分别是height、width和background color。

这里的高度保持4px不变，但您可以根据需要进行更改。为了使其更通用，我们将宽度设为 100%。这样，我们就可以根据外部组件控制进度条的宽度。赋予此 div 的背景颜色定义了进度条的空状态。因此，我们使用了bg-gray-300Tailwind 的默认颜色。

现在，由于内部宽度代表此进度条的实际进度，我们需要使其宽度依赖于以进度百分比形式传递的值。因此，我们为这个 div 添加了内联样式属性，并将百分比作为值传递给 width 属性。此外，我们为这个内部 div 添加了 100% 的高度。因此，它将占用外部 div 的整个高度。

按照我的用例，如果进度低于 70%，我们需要将进度条显示为红色，否则显示为绿色。我们可以通过使用条件样式轻松实现这一点。您可以看到，我们根据条件将背景颜色的类应用于此 div。如果您有多个条件，可以使用变量获取背景颜色的值，并将该类应用于此 div。

这是进度条的最小结构，您可以根据需要继续添加更多功能。但我想，这个基本结构应该可以满足大多数需求了。

暂时就这些。我已经创建了一个GitHub 仓库来创建 React 和 Tailwind 组件。你可以去看看，如果感兴趣的话，还可以添加更多组件。

非常感谢你阅读这篇文章。欢迎留言告诉我你的想法。如果你喜欢我的文章，也可以在Twitter上联系我，或者请我喝杯咖啡。

快乐编码并继续学习🙌