为什么这个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}"。

Transpilation

因为它基本上不是字符串文字，所以Babel不会像这样对它进行转换。使用the 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。

Answer 2

你可以这样做

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