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

Question

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

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

将产生正确的结果:

但我想在引号周围添加双引号，所以我尝试了:

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

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

我期待与此类似的输出，因为它是字符串文字:

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

<小时/>

^{注意:这是一个 self 问答}

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具有以下文本作为子元素的元素:

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

双引号成为子文本文本，props.quote 的值用来。 Babel对待开闭{ … }作为内联 JSX 表达式，无论它位于何处(除非在字符串文字内的另一个 JSX 表达式内)。该表达式的计算结果为字符串 The best way to predict the future is to create it在这种情况下。