ReactJS 是否将对象文字解析为字符串？答案

【问题标题】：Does ReactJS parse object literals into strings?ReactJS 是否将对象文字解析为字符串？
【发布时间】：2017-03-16 12:13:18
【问题描述】：

我现在正在浏览 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上试过）

谢谢！

【问题讨论】：

标签： javascript css reactjs ecmascript-6 babeljs

【解决方案1】：

如documentation 中所述，style 属性接受具有驼峰式属性的 JavaScript 对象，而不是 CSS 字符串。所以如果你用带引号的字符串替换它，它就行不通了。

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

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

【讨论】：

这就是我想要的。谢谢！

【解决方案2】：

是否有将对象文字转换为双引号格式的 ES6/JSX/React 规则？（这是如何工作的？）

style 属性接受字符串或对象值。所以从某种意义上说，是的，对象被转换为正确的 CSS 文本字符串。这与 DOM 元素的 style 属性非常相似。

但是，这是代表 HTML 元素的组件的 style 属性的特定行为。如果对每个组件都这样做，就不可能将对象作为 prop 值传递给自定义组件。

为什么用双引号替换大括号不起作用？

因为 字符串 "{color: 'red'}" 不是有效的 CSS。您尝试替换花括号的事实让我想知道您是否理解其中的区别。

JSX 属性可以采用foo="bar" 或foo={bar} 的形式。在第一种情况下，传递给foo 的值将是一个字符串，其中包含值bar。在第二种情况下，大括号 ({}) 内的任何内容都被评估为 JavaScript 表达式，并将其结果传递给 foo。

如果我们看看这些 JSX sn-ps 转换成什么，这可能会更明显：

// In:
<div style="color:red" />
// Out:
React.createElement("div", { style: "color:red" });

// In:
<div style={{color: 'red'}} />
// Out:
React.createElement('div', { style: { color: 'red' } });

// Therefore
// In:
 <div style="{color: 'red'}" />
// Out:
React.createElement("div", { style: "{color: 'red'}" });

【讨论】：