React & Progressbar.js：自定義形狀的進度圈

Question

我在JavaScript和React 中發現了這個很酷的加載進度項目。 在底部的示例中，它們有一個進度加載圓圈，形狀為 .svg 圖片（心形）。 我想用自定義 .svg 和 React 做同樣的事情，但我很難得到一個有效的例子。 我是用npm安裝的，但是如何導入以及如何使用呢？

// import

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

...
// Why progressBar.Circle, can't I import Circle directly from the package?
var Circle = progressBar.Circle;

let options = {
    strokeWidth: 2,
  };
  let containerStyle = {
    width: '200px',
    height: '200px',
  };

...

 return (
    <Circle
      progress={1}
      text={'test'}
      options={options}
      initialAnimate={true}
      containerStyle={containerStyle}
      containerClassName={'.progressbar'}
    />
  );

目前我收到錯誤：

錯誤：元素引用被指定為字符串 (progressBar)，但沒有設置所有者。

如果有人可以制作一個最小的工作示例如何使用 react-progressbar.js 那就太好了。

我也願意接受替代方案，如果它們易於使用而無需太多代碼。 提前致謝。

Answer 1

這個包有點過時了，所以它基於舊版本的反應，允許 refs 是簡單的字符串。 較新版本的 react（您可能正在使用的版本）不再允許這樣做，因此會出現錯誤。

請參閱： 元素引用被指定為字符串（映射）但未設置所有者

你應該：

1. 降級您的反應版本（我不建議使用舊版本只是為了使用過時的依賴項）
2. 使用不同的庫（快速谷歌搜索揭示了很多反應進度條包）
3. 使用此庫的 Javascript 版本，並將功能包裝在自定義反應組件中

類似的東西

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>
     )
   }
}

Answer 2

@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>
      </>
    );
  }
}