时间戳

首页 > 解决方案 > 进度条增加负载百分比

reactjs - 进度条增加负载百分比

问题描述

我正在制作一个简单的进度条，它使用 reactjs 和 ant 设计增加负载百分比，我的问题是我无法达到这种效果。

希望你能理解我。

谢谢。

小代码

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

标签： reactjsprogress-barantd

解决方案

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

推荐阅读