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

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


将产生正确的结果:

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

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

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


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

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

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

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

为什么"{props.quote}"不能在字面上显示我,因为{props.quote}在字符串文字中?这是Babel的错误吗?



注意:这是一个自我问答

最佳答案

输出一点也不奇怪。它按预期工作,没有错误。

语义学

您必须了解的是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

10-05 20:41
查看更多