Почему срабатывают бросает ошибку

Question

У меня есть следующий React компонент:

GeneralInformation = React.createClass({ 

    totalCaptialRaisedPanel: function() { 
     var offeringInfo = this.props.company.data.offerings.data[0]; 
     var percentageComplete = (offeringInfo.capital_raised/offeringInfo.target_amount) * 100; 

     return(
      <div> 
       <h1>$ {offeringInfo.capital_raised}</h1> 
       <h3>TOTAL CAPITAL RAISED</h3> 
       <div className="progress"> 
        <div className="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" 
         aria-valuemax="100" style="width: 60%;"> 
        <span className="sr-only">60% Complete</span> 
        </div> 
       </div> 
      </div> 
     ) 
    }, 

    render: function() { 
     return (
      <div> 
       {this.totalCaptialRaisedPanel()} 
      </div> 
     ) 
    } 
}); 

Вопрос, кажется:

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

Как без этого не выкинули никакой ошибки. Ошибка:

Uncaught Error: Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by `GeneralInformation`. 

Некоторые люди высказали свое, потому что виртуальный дом отличается, то нормальный дом или что-то и то, почему я получаю эту ошибку, как всегда, что не имеет смысла. Все, что я делаю, это создание этого компонента, я не манипулирую его ...

Что происходит?

Answer 1

Похож, что вам нужно style={{width: 60%}}.

Answer 2

Это то, что работает для меня:

style={{width: "60%"}}