如何动态更改 ReactJS 样式？

我试图在我的 Bootstrap 网页应用程序中运行 ReactJS，我在使用样式方面有一些问题。

有这个 div:

   ...
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 80%;"/>
...

我正在写一些动态进度条，并希望做出80% 的改变(看看下面的 * *)。这是我用 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>
);
}
});

我阅读了一些关于嵌入式系统的文档，但是这个例子非常简单。

谢谢你的帮助。

编辑:

使用:

    style={{width : this.props.children}}

它工作得很好，只是不知道如何将其强制为% 而不是 px。

159315 次浏览

小开

终于找到解决办法了。

可能是因为缺乏使用 ReactJS 和 Web 开发的经验..。

    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}}/>
...

我在呈现函数的外部创建了百分比变量。

小开

你可以这样做:

    <div className="ui-progressbar-value ui-widget-header ui-corner-left"
style=\{\{width : `${this.props.value}%`}}/>

宽度以百分比为单位，例如 100%/50%..。