加载进度条增加百分比

Question

我正在开发一个简单的进度条，它使用 reactjs 和 ant design 来增加负载百分比，我的问题是我无法实现该效果。

希望你理解我。

谢谢。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      percent: 0
    };
  }

  componentDidUpdate() {
    let percent = this.state.percent;
    for (; percent < 40; percent++) {
      this.setState({
        percent: percent
      });
    }
  }
  render() {
    return (
      <div>
        <Progress percent={this.state.percent} />
      </div>
    );
  }
}

Answer 1

您在 componentDidUpdate 中有百分比循环。所以它不会触发，直到组件更新（它不在您的代码中的其他任何地方）。如果将其更改为 componentDidMount，它将立即执行循环。查看 React 生命周期方法及其触发时间。

加载进度条增加百分比

Progress bar increase precentage on load

progress-bar

reactjs

antd