javascript - 尝试使用 React 中构造函数中的变量设置引导进度条的宽度

Question

我真的是 React 的新手，遇到了一些麻烦。我正在尝试将进度条的进度设置为我在我的 React 组件的构造函数中拥有的变量。我只是在使用常规的旧 Bootstrap 进度条。进度条出现，但我尝试过的宽度设置实际上不会填充进度条。如果有人可以帮忙，我将不胜感激。这是我的代码:

import React, { Component } from 'react';
import SalesData from '../data/salesData';

class ProgressBar extends Component {
    constructor() {
        super();
        this.ordersInProgress = 0;
        this.totalSales = 0;
        this.orderGoal = 260;

        SalesData.forEach(item => {
            this.ordersInProgress += item.orders;
            this.totalSales += item.orders * item.price;
        });

        this.progressBarPercentage = Math.floor((this.ordersInProgress / this.orderGoal) * 100);
        this.completedOrders = this.orderGoal - this.ordersInProgress;
    }

    render() {
        return (
            <div className="progressBarBlock">
                <div className = "progress progressBar">
                    <div className='progress-bar progressBarColor'
                         role='progressbar'
                         aria-valuenow='70'
                         aria-valuemin='0'
                         aria-valuemax='100'
                         styles={{width: this.progressBarPercentage}}>
                    </div>
                </div>
            </div>
        )
    }
}
export default ProgressBar

tldr:我正在尝试将进度条进度设置为等于我在构造函数中计算的 progressBarPercentage，但它没有填充。再次感谢您提供的任何帮助!

Answer 1

不建议您在类字段(例如 this.ordersGoal)中保存数据，尤其是当您的组件依赖于该数据进行渲染时，因为它不会跟踪更改。 this.state/this.setState() 就是为此目的而设计的。

2)应该是style，不是styles，上面已经说了

class ProgressBar extends Component {
  constructor() {
    super();

    let ordersInProgress = 0;
    let totalSales = 0;
    let orderGoal = 260;

    SalesData.forEach(item => {
      ordersInProgress += item.orders;
      totalSales += item.orders * item.price;
    });

    const progressBarPercentage = Math.floor((ordersInProgress / orderGoal) * 100);
    const completedOrders = orderGoal - ordersInProgress;

    this.state = { progressBarPercentage, completedOrders };
  }

  render() {
    return (
      <div className="progressBarBlock">
        <div className = "progress progressBar">
          <div className='progress-bar progressBarColor'
               role='progressbar'
               aria-valuenow='70'
               aria-valuemin='0'
               aria-valuemax='100'
               style={{width: this.state.progressBarPercentage}}>
          </div>
        </div>
      </div>
    )
  }
}
export default ProgressBar

3) 经过仔细研究，我发现了很多问题:1) 数据应该作为 props 2) 在这种情况下不需要状态 3) 组件变成无状态函数 4) 由于计算错误百分比总是为零

这是沙盒，可以看到它在工作 https://codesandbox.io/s/o51lnz7o99