当我发现这种奇怪之处时,我正在玩JSX。使用以下JSX:
<div>{props.quote}</div>
将产生正确的结果:
但是我想在引号周围添加双引号,因此我尝试:
<div>"{props.quote}"</div>
令我惊讶的是,它给出了正确的输出:
我期待的输出类似于此,因为它是字符串文字:
为什么
"{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
。