如何在我的反应应用程序中添加这个进度条 js（初学者）

Question

您好，我想在我的反应应用程序中添加进度条 js，但我不知道该怎么做，我是初学者，有人可以提供一些帮助吗？ progressbarjs：来自https://kimmobrunfeldt.github.io/progressbar.js/所以基本上我必须在我的反应中添加这个 js 代码：

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
    bar.path.setAttribute('stroke', state.color);
  }
});

bar.animate(1.0);

请问如何管理？

Answer 1

ProgressBar.js 的同一创建者有一个 npm 库（称为 react-progress-bar ），它可能更适合您在 React 中使用，而不需要太多的摆弄。

该文档似乎足够全面，但我正在索引您说您是初学者的事实，所以这里有一个<ProgressBar />组件在这个库中的外观示例：

var App = React.createClass({
    render: function render() {
        var options = {
            strokeWidth: 2
        };
 
        // For demo purposes so the container has some dimensions.
        // Otherwise progress bar won't be shown
        var containerStyle = {
            width: '200px',
            height: '200px'
        };
 
        return (
            <Circle
                progress={this.state.progress}
                text={'test'}
                options={options}
                initialAnimate={true}
                containerStyle={containerStyle}
                containerClassName={'.progressbar'} />
        );
    }
});

您可以通过多种方式使用进度条，但一种常见的模式是将其用作加载器，同时等待数据（例如，从 axios 调用到服务器/API）。

该模式通常如下所示：

... //your React code
return (
   <div>
      {dataIsFetched? <span>{data.content}</span> : <ProgressBar />}
   </div>
)

查看npm 库以了解如何使用它。

Answer 2

它很可能不起作用，因为 React 不知道 ProgressBar 是什么，除非你将它包含在项目中。 似乎它的 API 相当“低级”，所以你为什么不在那里寻找一些 React 制作的进度条呢？ 也许它会更好地满足您的需求。

您可以查看例如MUI 、 Bootstrap或其他一些选项。

Answer 3

这是圆形进度条的示例

`  
 import { Circle } from 'progressbar.js'
 import { useEffect } from 'react'

export default function CircleProgress () {   
    useEffect(() => {
     var bar = new Circle('#container', {easing: 'easeInOut'});
     bar.animate(1);
   }, [])

    return (
      <div id="container"></div>
    )
}`