javascript - ReactJS 是否将对象文字解析为字符串？

Question

我现在正在浏览 ReactJS 教程，仔细考虑“在 React 中思考”部分，特别是代码的一个方面真的让我很困扰:

class ProductRow extends React.Component {
  render() {
    var name = this.props.product.stocked ?
      this.props.product.name :
      <span style={{color: 'red', background: 'green'}}>     // this line
        {this.props.product.name}
      </span>;
    return (
      <tr>
        <td>{name}</td>
        <td>{this.props.product.price}</td>
      </tr>
    );
  }
}

有关代码的其余部分，请参阅:http://codepen.io/lacker/pen/vXpAgj

... 在第 11 行，样式被分配为 {color: 'red'}。在我看来，这不应该起作用，因为它不符合样式语法(例如“颜色:'红色'”)。然而，如果我用双引号替换花括号，代码就不会运行。

1) ES6/JSX/React 是否有将对象字面量转换为双引号格式的规则？ (这是如何工作的？)

2) 为什么用双引号替换大括号不起作用？ (在codepen上试过)

谢谢!

Answer 1

如 documentation 中所述, style 属性接受具有驼峰式属性的 JavaScript 对象而不是 CSS 字符串。因此，如果您将其替换为带引号的字符串，它将不起作用。

他们之所以选择这种方式，是因为它符合 DOM 风格的 JavaScript 属性，效率更高，并且可以防止 XSS 安全漏洞。

请注意，样式名称是驼峰式的，而不是破折号分隔的。即 marginLeft 而不是 margin-left。