如何在 React.js 中创建自定义进度条组件？

在本文中，我们将使用 React.js 制作一个可重用的自定义进度条组件

先决条件：

• React 基础知识
• HTML/CSS 基础知识
• React 中的内联样式

组件应该执行以下操作：

1. 通过彩色条直观地向用户指示进度。
2. 以百分比形式显示百分比
3. 允许您更改进度条的高度、宽度和背景颜色的道具。

基本上，进度条由代表整个进度条的父 div 和一个子 div 组成，其中进度条的已完成部分以及跨度将显示已完成的百分比数字。

道具：

• bgcolor：它会改变进度条的背景颜色。
• 进度：它将具有 1 到 100 之间的值。
• height：用于改变进度条的高度。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序

npx create-react-app progress_bar

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd Progress_bar

第三步：在 Component 文件夹中添加Progress_bar.js文件，然后在 App.js 中导入 Progressbar 组件

项目结构：它将如下所示。

文件夹结构

第 4 步：现在让我们在Progress_bar.js中创建进度条

Progress_bar.js

import React from 'react'
  
const Progress_bar = ({bgcolor,progress,height}) => {
     
    const Parentdiv = {
        height: height,
        width: '100%',
        backgroundColor: 'whitesmoke',
        borderRadius: 40,
        margin: 50
      }
      
      const Childdiv = {
        height: '100%',
        width: `${progress}%`,
        backgroundColor: bgcolor,
       borderRadius:40,
        textAlign: 'right'
      }
      
      const progresstext = {
        padding: 10,
        color: 'black',
        fontWeight: 900
      }
        
    return (
    

      

        {`${progress}%`}
      
    
    )
}
  
export default Progress_bar;

第 5 步：让我们通过导入 Progress_bar 组件来渲染进度条组件。

应用程序.js

import './App.css';
import Progressbar from './Component/Progress_bar';
  
function App() {
  return (
     
   

     
Progress Bar
      
      
      
      
      
   
     
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开您的浏览器并转到 http://localhost:3000/，您将看到以下输出：

反应中的进度条