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

Question

当我发现这个奇怪的东西时，我正在玩JSX。使用以下JSX：

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

会产生正确的结果：

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

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

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

我希望得到类似的输出，因为它是字符串文字：

既然{props.quote}在字符串文本中，它为什么不按字面意思告诉我{props.quote}？这是巴贝尔的错误吗？

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

Answer 1

你可以那样做

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

Answer 2

输出一点也不奇怪。它按预期工作，没有bug。

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

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

这里，{…}是一个内联JSX表达式，在元素中被视为JavaScript表达式。因此，它被解释为一个字符串文本，并将从字面上为您提供“{props.quote}”。

因为它根本不是一个字符串字面，巴别塔不会这样转置它。使用巴别塔REPL，我们可以看到它被转换成什么：

"use strict";

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

如前所述，双引号被视为元素中的任何其他文本。一旦转置，

• “\”
• props.quote
• “\”

双引号作为子项变成文本，并使用props.quote的值。Babel将开始和结束的{…}视为一个内联JSX表达式，而不管它位于何处（除非在字符串文本中的另一个JSX表达式中）。该表达式的计算结果为字符串，在本例中，预测未来的最佳方法是创建它。