индикатор бутстрапа не отображает внутри реактивного компонента

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

У вас должно быть 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>