如何使用反应编辑元素宽度

Question

I'd like to edit my progress bar width by using react props. In my code I have a certain value in the component state (state.progress). How can I use it to properly stretch the progress bar,

 class Hello extends React.Component { render() { return <div className = "bar" > <div className = "progress" > </div> </div>; } } ReactDOM.render( < Hello name = "World" / > , document.getElementById('container') );

 .bar { width: 100%; border: 1px solid black; border-radius: 15px; height: 15px; } .progress { width: 5%; background: green; border-radius: 15px; height: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>

Thanks folks!

Answer 1

You can use inline style prop.

Example

  render() {
    return <div className="bar" >
      <div className="progress" style={{width: this.state.progress}} >
        // ...
      </div> 
    </div>;
  }

Answer 2

尝试将style={{width: this.state.progress + '%'}}到progress类的 div

Answer 3

Assuming that you are going to update progress with a call like this:

this.setState({ progress: 50})

Setting the state will trigger a re-render, which can control the width of your progress bar like this:

  <div className = "progress" style={{width: this.state.progress+"%"}}>

Answer 4

您可以通过style属性将进度条的百分比值指定为 CSS 元素的百分比宽度：

 <span className="fill" style={{width: this.state.value + '%'}}>