Question

我现在正在阅读ReactJS教程，仔细阅读“Thinking In 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'}。在我看来，这应该不起作用，因为它不符合样式语法（例如“color：'red'”）。但是，如果我用双引号替换花括号，则代码不会运行。

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

2）为什么不用双引号替换花括号？（在codepen上试过）

谢谢！

Answer 1

如documentation中所述，style属性接受具有camelCased属性而非CSS字符串的JavaScript对象。因此，如果您使用带引号的字符串替换它，它将无法正常工作。

他们选择这种方法，因为这与DOM样式的JavaScript属性一致，效率更高，并且可以防止XSS安全漏洞。

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

Answer 2

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

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

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

为什么不用双引号替换花括号？

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

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

如果我们看看这些JSX片段被转换为什么，这可能会更加明显：

// 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'}" });

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

2 个答案: