反应中的内联样式（进度条进度）答案

【问题标题】：Inline styling in react (Progressbar progress)反应中的内联样式（进度条进度）
【发布时间】：2019-02-23 01:34:11
【问题描述】：

我正在尝试使用 className“progress”来设置元素的样式，即使在尝试了许多可能性之后，我也无法为我的生活弄明白。

我能得到的任何帮助或提示将不胜感激！这是组件的代码：

  constructor(props) {
    super(props);

    this.state = {
      arrIterator: 0,
      counter: 0,
      sets: props.ids.sets,
      exercises: props.program,
      ids: props.ids
    }

    // Helper variable to decide when a new round starts --> Reset counter
    this.newRoundOn = ((this.state.exercises.length /this.state.sets) -1);

    // Gets percentage for progressbar
    let barPercentage = ((this.state.arrIterator / this.state.exercises.length) * 100) +"%";

    this.style = {
      width: {barPercentage} 
    }
  }

  // Renders Progress Bar
  renderProgressBar() {
    return(
      <div className="card-panel" id="progresjon-panel">
      <div className="row">
          <h5 className="col s8">Progresjon</h5>
          <h5 className="col s4 right-align">{this.state.arrIterator +1} / {this.state.exercises.length}</h5>
      </div>
      <div className="progress" style={style}>
          <div className="determinate"></div>
      </div>
  </div>
    );
  }

【问题讨论】：

style 未定义。尝试将其更改为<div className="progress" style={this.style}。

标签： css reactjs progress-bar styling

【解决方案1】：

您必须修改您的状态才能使进度条更改其值。使用componentDidUpdate 方法检查某些属性是否更改，然后设置新的barPercentage 值：

作为一个小建议，您应该避免使用passing props to state。

constructor () {
   this.state = {
     barPercentage: 0
   } 
}

componentDidUpdate (prevProps) {
  // Helper variable to decide when a new round starts --> Reset counter
  this.newRoundOn = ((this.props.exercises.length /this.props.sets) -1);

  // Gets percentage for progressbar
  let barPercentage = (this.props.arrIterator / this.props.exercises.length) * 100;

  if (this.props.arrIterator > prevProps.arrIterator) {
    this.setState({ barPercentage })
  }
}

render () {
  return (
    // [...]
    <div className="progress" style={{ width: `${this.state.barPercentage}%` }}>
      <div className="determinate"></div>
    </div>
    // [...]
  )
}

【讨论】：

非常感谢！ :) 正是我想要的！

【解决方案2】：

  constructor(props) {
    super(props);

    this.state = {
      arrIterator: 0,
      counter: 0,
      sets: props.ids.sets,
      exercises: props.program,
      ids: props.ids
    }

    // Helper variable to decide when a new round starts --> Reset counter
    this.newRoundOn = ((this.state.exercises.length /this.state.sets) -1);

    // Gets percentage for progressbar
    let barPercentage = ((this.state.arrIterator / this.state.exercises.length) * 100) +"%";

    this.style = {
      width: {barPercentage} 
    }
  }

  // Renders Progress Bar
  renderProgressBar() {
    return(
      <div className="card-panel" id="progresjon-panel">
      <div className="row">
          <h5 className="col s8">Progresjon</h5>
          <h5 className="col s4 right-align">{this.state.arrIterator +1} / {this.state.exercises.length}</h5>
      </div>
      <div className="progress" style={style}>
          <div className="determinate"></div>
      </div>
  </div>
    );
  }

【讨论】：