為什么這個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}" 。

轉譯

因為從根本上講它不是字符串文字 ，所以Babel不會像這樣編譯它。 使用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在這種情況下The best way to predict the future is to create it 。