Javascript 如何使用react编辑元素宽度

我想使用react道具编辑我的进度条宽度。 在我的代码中，组件状态（state.progress）中有一个特定的值。 如何使用它来适当地拉伸进度条

类Hello扩展了React.Component{
render（）{
返回
;
}
}
ReactDOM.render（<
您好name=“World”/>，
document.getElementById（'容器'）
);
.bar{
宽度：100%；
边框：1px纯黑；
边界半径：15px；
高度：15px；
}
.进展{
宽度：5%；
背景：绿色；
边界半径：15px；
高度：15px；
}
您可以使用内嵌式道具

范例

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

render（）{
返回
// ...
;
}
尝试将
样式={{{width:this.state.progress+'%}}
添加到带有
进度
类的div
中，假设您要使用如下调用更新进度：

this.setState({ progress: 50})

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

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

this.setState({ progress: 50})

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

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

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


类似于
style={{{width:this.state.progress}}
是的，我考虑过了，但它看起来非常难看，好像是在90年代编码。没有别的办法吗？听起来这是最常用的方法。我希望react有更干净的方法来做到这一点，而不是使用90年代的技术。分离js/html和Css花了15年时间，现在这三个东西又粘在一起了，这让我大吃一惊，即使我明白“这都与单个组件有关”是的，世界是圆形的。将所有内容保存在单独的文件中只意味着您需要花时间在文件之间切换（尽管这仍然是必要的）。至少现在一切都在一个地方。分离关注点的梦想并不是那么简单，所以它又回到了一起。编程世界是封闭的：）关注点分离刚刚从语言转移到组件。反应仍然是独立的关注点，但它是水平的而不是垂直的。向框架中添加的糖分越多，对诸如“宽度=10%”何时转换为“样式=宽度：50%”之类的内容的控制就越少，渲染管道就变得越复杂。当你在做比helloworld教程更复杂的事情时，这种东西会让你感到痛苦。