问题描述
我试图在我的Twitter引导程序Web应用程序中运行ReactJS.我在使用样式时遇到一些问题.
I was trying to run ReactJS inside my twitter bootstrap web app. I have some issues using styles.
具有该div:
...
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 80%;"/>
...
我正在编写一些动态进度条,并希望进行80%的更改(请看下面的**).这就是我用JSX编写的代码:
I'm writing some dynamic progress bar, and would like to make that 80% change (look at ** underneath). So this is my code writing in JSX:
var Task = React.createClass({
render: function() {
return (
<li>
<a href="#">
<span className="header">
<span className="title">{this.props.type}</span>
<span className="percent">{this.props.children}%</span>
</span>
<div className="taskProgress progressSlim progressBlue" >
<div className="ui-progressbar-value ui-widget-header ui-corner-left"
**style="width"+{this.props.value} +"%;" />**
</div>
</a>
</li>
);
}
});
我阅读了一些有关内联样式的文档,但是该示例非常简单.
I read some documentation about the inline sytles, but the example is very light.
感谢您的帮助.
使用:
style={{width : this.props.children}}
它工作正常,但只是想知道如何将其强制为%而不是px.
it works fine, but was just wondering how to force it as % instead of px.
推荐答案
好,终于找到了解决方案.
Ok, finally found the solution.
可能是由于缺乏对ReactJS和Web开发的经验...
Probably due to lack of experience with ReactJS and web development...
var Task = React.createClass({
render: function() {
var percentage = this.props.children + '%';
....
<div className="ui-progressbar-value ui-widget-header ui-corner-left" style={{width : percentage}}/>
...
我在render函数的外部创建了百分比变量.
I created the percentage variable outside in the render function.
这篇关于如何动态改变ReactJS样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!