我试图在我的 twitter bootstrap web 应用程序中运行 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>
  );
 }
});

我阅读了一些关于内联 sytles 的文档，但这个例子非常简单。

谢谢你的帮助。

编辑：

通过使用：

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

它工作正常，但只是想知道如何将其强制为 % 而不是 px。