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需要数字，而不是字符串

Answer 2

您应该style属性不是styles而style prop需要从样式属性映射到值，而不是字符串。所以这会奏效：

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

bootstrap进度条不会在内部反应组件

2 个答案: