javascript 如何使用反应编辑元素宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46908083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to edit element width using react
提问by Koop4
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,
我想通过使用反应道具来编辑我的进度条宽度。在我的代码中，我在组件状态 (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>Thanks folks!
谢谢各位！
回答by bennygenel
You can use inline style prop.
您可以使用内联样式道具。
Example
例子
render() {
return <div className="bar" >
<div className="progress" style={{width: this.state.progress}} >
// ...
</div>
</div>;
}
回答by Radovan Kuka
Try to add style={{width: this.state.progress + '%'}}to the div with progressclass
尝试style={{width: this.state.progress + '%'}}使用progress类添加到 div
回答by Mikkel
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+"%"}}>
回答by manoj
You can assign the percentage value of the progress bar as the percentage width of the element with CSS through styleattribute:
您可以通过style属性将进度条的百分比值指定为元素的百分比宽度与CSS ：
<span className="fill" style={{width: this.state.value + '%'}}>
