Javascript 为什么要抛出错误

我有以下反应组件：

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>
        )
    }
});

有些人说这是因为虚拟dom与普通dom或其他东西不同，这就是为什么我会出现这个错误，不管怎样，这都没有意义。我所做的只是创建这个组件，而不是操纵它

---

发生了什么事？

看起来你需要

style={{{width:60%}

这对我来说很有用：

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

---

顺便说一句，我从来没有用过。。。我刚刚把你的错误信息发布到了一个回复中：P

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

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