如何在 ReactJS 中创建进度条？

ReactJS 是一个流行的 JavaScript 框架，它帮助我们创建复杂的 UI 界面。在本文中，我们将介绍如何在 ReactJS 中创建进度条。

使用第三方库

ReactJS 生态系统中有许多第三方库可以让我们轻松地创建进度条。其中，我们推荐使用 react-progress-bar。

安装 react-progress-bar

你可以使用以下命令安装 react-progress-bar ：

npm install react-progress-bar --save

ProgressBar 组件

安装完毕之后，我们可以使用 ProgressBar 组件来创建进度条。具体的用法如下所示：

import React from 'react';
import ProgressBar from 'react-progress-bar';

function App() {
  return (
    <div>
      <ProgressBar completed={40} />
    </div>
  );
}

export default App;

在这里，我们将进度条的进度设置为 40。

更多选项

你可以使用以下选项来自定义进度条：

<ProgressBar
  completed={40}
  bgcolor="#6a1b9a"
  baseBgColor="#757575"
  height="20px"
  borderRadius="10px"
  isLabelVisible="true"
  labelAlignment="center"
/>

这里，我们设置了进度条的背景色，基础背景色，高度，边框半径，标签可见性和标签对齐方式。

不使用第三方库

如果你不想使用第三方库，你可以手动创建一个进度条组件。

创建 ProgressBar 组件

首先，我们需要创建一个 ProgressBar 组件。在这个组件中，我们将使用动态渲染进度条。

import React from 'react';

const ProgressBar = (props) => {
  const { completed } = props;

  return (
    <div>
      <div style={{ width: `${completed}%` }} />
    </div>
  );
};

export default ProgressBar;

在这里，我们渲染了一个 div 元素，它的宽度是根据进度设置的。

渲染 ProgressBar 组件

在你的 ReactJS 应用程序中，你可以使用 ProgressBar 组件来创建进度条。以下是一个例子：

import React, { useState, useEffect } from 'react';
import ProgressBar from './ProgressBar';

function App() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prevProgress) =>
        prevProgress >= 100 ? 0 : prevProgress + 10
      );
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <ProgressBar completed={progress} />
    </div>
  );
}

export default App;

在这里，我们使用了 useState 钩子来存储进度。我们使用 useEffect 钩子来更新进度，并且返回一个清除函数。

结论

在本文中，我们介绍了如何在 ReactJS 中创建进度条。你可以选择使用第三方库，例如 react-progress-bar，也可以手动创建一个进度条组件。无论你选择哪种方法，都可以帮助你创建一个漂亮的进度条。