为什么这个 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 不会像这样转译它。使用 the Babel REPL，我们可以看到它被转译为：

"use strict";

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

如前所述，双引号与元素中的任何其他文本一样对待。转译后，<div>"{props.quote}"</div> 只是一个 div 元素，其文本如下 children:

"\""
props.quote
"\""

双引号变为文字文本children，并使用props.quote的值。 Babel 将开始和结束 { … } 视为内联 JSX 表达式，无论它位于何处（除非在字符串文字中的另一个 JSX 表达式中）。在本例中，该表达式的计算结果为字符串 The best way to predict the future is to create it。

Answer 2

你可以做到

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

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

Why does this JSX expression produce an odd result?

javascript

reactjs

babeljs

react-jsx

语义

转译