引导进度栏未在react组件内部呈现

Question

一个简单的引导进度条，可在我的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>

无法在我的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>

   }
});

我该如何进行这项工作？

Answer 1

我今天只需要这样做。这对我有用。

<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>

aria-valuemin，aria-valuemin并且 aria-valuemax需要一个数字，而不是字符串