Javascript 反应&；Progressbar.js：自定义形状的进度圈

我发现这个很酷的加载进度项目在和中可用。在它们的底部，它们有一个.svg图片（心形）形状的进度加载圆。我想对custom.svg和in-React执行同样的操作，但我很难得到一个有效的示例。我用npm安装了它，但是如何导入和使用它呢

// import

import progressBar from 'react-progressbar.js';
// or like in their outdated example? 
// var ProgressBar = require('react-progressbar.js')

。。。
//为什么progressBar.Circle，我不能直接从包中导入Circle吗？
var Circle=进度条圆；
让选项={
冲程宽度：2，
};
让集装箱式={
宽度：“200px”，
高度：“200px”，
};
...
返回(
);

在我得到错误的那一刻：

错误：元素ref被指定为字符串（progressBar），但没有 主人被安排好了

如果有人能给出一个如何使用react-progressbar.js的最简单的工作示例，那就太好了

如果没有太多的代码就可以很容易地使用，我也愿意接受其他选择。

---

提前感谢。

该软件包有点过时，因此它基于旧版本的react，允许引用为简单字符串。react的较新版本（您可能正在使用的版本）不再允许这样做，因此出现了错误

见：

你应该：

降级您的react版本（我不建议仅为了使用过时的依赖项而使用旧版本）

使用不同的库（快速谷歌搜索可以阅读很多react progressbar包）

使用此库的Javascript版本，并将功能包装在自定义react组件中

类似于

import { Circle } from 'progressbar.js'

export default class CircleProgress extends React.Component<Props, State> {
    

   componentDidMount() {
     var bar = new Circle('#container', {easing: 'easeInOut'});
     bar.animate(1);
   }

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

从'progressbar.js'导入{Circle}
导出默认类CircleProgress扩展React.Component{
componentDidMount（）{
var bar=新的圆（“#容器”{easeInOut'}）；
动画（1）；
}
render（）{
返回(
)
}
}

该包有点过时，因此它基于旧版本的react，该版本允许引用为简单字符串。react的较新版本（您可能正在使用的版本）不再允许这样做，因此出现了错误

见：

你应该：

降级您的react版本（我不建议仅为了使用过时的依赖项而使用旧版本）

使用不同的库（快速谷歌搜索可以阅读很多react progressbar包）

使用此库的Javascript版本，并将功能包装在自定义react组件中

类似于

import { Circle } from 'progressbar.js'

export default class CircleProgress extends React.Component<Props, State> {
    

   componentDidMount() {
     var bar = new Circle('#container', {easing: 'easeInOut'});
     bar.animate(1);
   }

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

从'progressbar.js'导入{Circle}
导出默认类CircleProgress扩展React.Component{
componentDidMount（）{
var bar=新的圆（“#容器”{easeInOut'}）；
动画（1）；
}
render（）{
返回(
)
}
}

@gbalduzzi的答案是正确的，并且被接受。 我仍然想发布一个带有自定义.svg图像的完整工作示例：

import React from 'react';
import ProgressBar from 'progressbar.js';

export default class CustomProgressShape extends React.Component {
  componentDidMount() {
    var svgPath = document.getElementById('heart-path');
    var path = new ProgressBar.Path(svgPath, {
      easing: 'easeInOut',
      duration: 5000,
      step: function(state, circle) {
        if (circle.value() === 1) {
          circle.set(0);
          circle.animate(1.0);
        }
      },
    });
    path.set(0);
    path.animate(1.0);
  }

  render() {
    return (
      <>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
          <path
            fill-opacity="0"
            stroke-width="0.5"
            stroke="#f4f4f4"
            d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"
          />
          <path
            id="heart-path"
            fill-opacity="0"
            stroke-width="0.6"
            stroke="#555"
            d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"
          />
        </svg>
        <div id="container"></div> <div id="heart-path2"></div>
      </>
    );
  }
}

从“React”导入React；
从“ProgressBar.js”导入ProgressBar；
导出默认类CustomProgressShape扩展React.Component{
componentDidMount（）{
var svgPath=document.getElementById（'heart-path'）；
var path=newprogressbar.path（svgPath{
放松：“放松”，
持续时间：5000，
步骤：功能（状态、循环）{
if（circle.value（）==1）{
圆集（0）；
圆。动画（1.0）；
}
},
});
路径集（0）；
路径。动画（1.0）；
}
render（）{
返回(
);
}
}

@gbalduzzi的答案是正确的，并且被接受。 我仍然想发布一个带有自定义.svg图像的完整工作示例：

import React from 'react';
import ProgressBar from 'progressbar.js';

export default class CustomProgressShape extends React.Component {
  componentDidMount() {
    var svgPath = document.getElementById('heart-path');
    var path = new ProgressBar.Path(svgPath, {
      easing: 'easeInOut',
      duration: 5000,
      step: function(state, circle) {
        if (circle.value() === 1) {
          circle.set(0);
          circle.animate(1.0);
        }
      },
    });
    path.set(0);
    path.animate(1.0);
  }

  render() {
    return (
      <>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
          <path
            fill-opacity="0"
            stroke-width="0.5"
            stroke="#f4f4f4"
            d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"
          />
          <path
            id="heart-path"
            fill-opacity="0"
            stroke-width="0.6"
            stroke="#555"
            d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"
          />
        </svg>
        <div id="container"></div> <div id="heart-path2"></div>
      </>
    );
  }
}

从“React”导入React；
从“ProgressBar.js”导入ProgressBar；
导出默认类CustomProgressShape扩展React.Component{
componentDidMount（）{
var svgPath=document.getElementById（'heart-path'）；
var path=newprogressbar.path（svgPath{
放松：“放松”，
持续时间：5000，
步骤：功能（状态、循环）{
if（circle.value（）==1）{
圆集（0）；
圆。动画（1.0）；
}
},
});
路径集（0）；
路径。动画（1.0）；
}
render（）{
返回(
);
}
}

非常好而且有用的答案。我试过你的代码，效果很好。谢谢你的帮助！非常好而且有用的答案。我试过你的代码，效果很好。谢谢你的帮助！美好的这绝对是有用的好！这绝对有用