为什么这个JSX表达式会产生奇怪的结果？

Question

当我发现这种奇怪之处时，我正在玩JSX。 使用以下JSX：

<div>{props.quote}</div>

将产生正确的结果：

但是我想在引号周围添加双引号，因此我尝试：

<div>"{props.quote}"</div>

令我惊讶的是，它给出了正确的输出：

我期待有类似于此的输出，因为它是字符串文字：

由于{props.quote}在字符串文字中，为什么它不给我字面的"{props.quote}" ？ 这是Babel的错误吗？

---

^{注意：这是一个自我问答}

Answer 1

输出一点也不奇怪。 它正在按预期工作，并且没有错误。

语义学

您必须了解的是JSX不是JavaScript。 在div内部，这不是字符串文字。 这只是一些文本，类似于HTML中的文本节点。 认为它应该是字符串文字的说法没有意义，因为它不是字符串文字。 双引号与元素内的任何其他文本一样，而{props.quote}被视为内联JSX表达式，其中相应地显示其值。 您可能将其与以下内容混淆了：

<div>"{"{props.quote}"}"</div>

在这里， { … }是内联JSX表达式，被视为元素内的JavaScript表达式。 因此，它被解释为字符串文字，并且将在字面上给您"{props.quote}" 。

转译

因为从根本上讲它不是字符串文字 ，所以Babel不会像这样编译它。 使用Babel REPL ，我们可以看到它被转换为：

"use strict";

React.createElement(
  "div",
  null,
  "\"",
  props.quote,
  "\""
);

如前所述，双引号与元素内的任何其他文本一样。 一旦被编译， <div>"{props.quote}"</div>只是一个div元素，其以下文本作为子元素：

• "\\""
• props.quote
• "\\""

双引号成为儿童的文字文本，并使用props.quote的值。 Babel将打开和关闭{ … }视为内联JSX表达式，而不管其在何处（除非在字符串文字内的另一个JSX表达式内）。 该表达式的计算结果为字符串The best way to predict the future is to create it在这种情况下The best way to predict the future is to create it 。