将状态属性添加到React中的内联样式中

Question

我有一个具有这样的内联样式的react元素：（缩短版本）

      <div className='progress-bar'
           role='progressbar'
           style={{width: '30%'}}>
      </div>

我想用州的属性替换宽度，尽管我不太确定该怎么做。

我尝试了：

      <div className='progress-bar'
           role='progressbar'
           style={{{width: this.state.percentage}}}>
      </div>

这甚至可能吗？

Answer 1

您可以像这样做

style={ { width: `${ this.state.percentage }%` } }

Example

Answer 2

是的，它可能在下面的检查

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      width:30; //default
    };
  }

  render(){
//when state changes the width changes
const style = {
  width: this.state.width
}
  return(
    <div>
    //when button is clicked the style value of width increases
      <button onClick={() => this.setState({width + 1})}></button>
      <div className='progress-bar'
           role='progressbar'
           style={style}>
      </div>
    </div>
  );
}

： - ）