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

Question

我想通过使用反应道具来编辑我的进度条宽度。在我的代码中，我在组件状态 (state.progress) 中有一个特定的值。我如何使用它来正确拉伸进度条，

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>

谢谢各位！

Answer 1

您可以使用内联样式道具。

例子

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