React-circular-progressBar 不显示初始动画答案

【问题标题】：React-circular-progressBar not showing initialAnimationReact-circular-progressBar 不显示初始动画
【发布时间】：2019-06-13 17:51:37
【问题描述】：

我有一个progressBar 组件。尽管将 initialAnimation 设置为 true，但初始动画仍无法正常工作。我错过了什么？是否需要任何额外的 CSS 来修复它？我只希望图表上的 initialAnimation 和数字不需要改变

import React from 'react'
import CircularProgressbar from 'react-circular-progressbar'
import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import PropTypes from 'prop-types'

const styles = theme => ({
    progressBar: {
      width: '80px',
      margin: 'auto',
      marginTop: theme.spacing.unit + 4,
      marginBottom: theme.spacing.unit + 4,
      position: 'relative'
    },
    text: {
        position: 'absolute',
        top: 20,
        left: 5,
        paddingRight: '5px' 
    }
  });

function StyledProgressbar(props) {
  const { classes, palette } = props;
  return (
    <div className={classes.progressBar}>
      <Typography variant="caption" align='center' className={classes.text}>
        {props.percentage}% complete
      </Typography>
      <CircularProgressbar
        percentage={props.percentage}
        strokeWidth={10}
        initialAnimation={true}
        styles={{
        path: {
            stroke: palette.secondary.main,
            strokeLinecap: 'round',
            transition: 'stroke-dashoffset 0.5s ease 0s',
        },
        trail: {
            stroke: palette.secondary.light,
            strokeLinecap: 'round',
        }
        }}>
      </CircularProgressbar>
    </div>
  );
}

StyledProgressbar.propTypes = {
  classes: PropTypes.object,
  percentage: PropTypes.number,
  palette: PropTypes.object
}

export default withStyles(styles)(StyledProgressbar);

【问题讨论】：

“版本 2.0.0 将百分比替换为值并删除了 initialAnimation 属性。”来自github.com/kevinsqi/react-circular-progressbar#props
我不久前做了这个，并且在我的 package.json 中有“react-circular-progressbar”：“^1.0.0”。它以前工作过。它不应该因为我没有升级而中断
如果之前可以工作，那么是什么变化导致它停止工作？

标签： reactjs material-ui

【解决方案1】：

你只需要改变这个：

import CircularProgressbar from 'react-circular-progressbar';

从此：

import { CircularProgressbar } from 'react-circular-progressbar';

更多信息refrence

【讨论】：