国家属性添加到内联样式在阵营

Question

我有了这样一个内嵌式的一个反应元素：（简略版）

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

:-)