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

有些人已经声明了它，因为虚拟dom与正常的dom或其他东西不同，这就是为什么我会收到这个错误，但这有什么不合理。我正在做的就是创建这个组件，我不是在操纵它......

怎么回事？

Answer 1

您似乎需要style={{width: 60%}}。

Answer 2

这对我有用：

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

为什么反应会抛出错误

2 个答案: