Question

我想通过使用react props编辑我的进度条宽度。在我的代码中，我在组件状态（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>;
  }

Answer 2

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

的div中

Answer 3

假设您要通过以下呼叫更新进度：

this.setState({ progress: 50})

设置状态将触发重新渲染，可以控制进度条的宽度，如下所示：

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

Answer 4

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

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

如何使用react

4 个答案: