Twitter bootstrap 引导进度条不显示'；不渲染内部反应组件

一个简单的引导进度条，在我的HTML代码中工作

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70"
    aria-valuemin="0" aria-valuemax="100" style="width:70%">
     <span class="sr-only">70% Complete</span>
   </div>
</div>

70%完成

无法在我的React组件中正确渲染。进度颜色不存在

var DreamLane = React.createClass({
   render: function(){
   <div className="progress">
       <div className="progress-bar" role="progressbar" aria-valuenow="70"
    aria-valuemin="0" aria-valuemax="100" styles="width:70%">
      <span className="sr-only">70% Complete</span>
      </div>
   </div>

   }
});

var DreamLane=React.createClass({
render:function（）{
70%完成
}
});

---

如何实现这一点？

您应该拥有

style

属性而不是

style

，

style

属性需要从样式属性映射到值，而不是字符串。因此，这将起作用：

70%完成

我今天不得不这么做。这对我有用

<div className='progress'>
  <div className='progress-bar'
       role='progressbar'
       aria-valuenow={70}
       aria-valuemin={0}
       aria-valuemax={10}
       style={{width: '70%'}}>
    <span className='sr-only'>70% Complete</span>
  </div>
</div>

70%完成

---

aria valuemin

，

aria valuemin

和

aria valuemax

需要一个数字，而不是字符串。但是，早些时候，使用样式给我带来了错误。两个大括号的宽度是多少？它只是一个内嵌在prop值中的对象文字。你可以阅读更多关于它的内容