JSX (React) 中的大括號是什么意思？

Question

例如，要在 react 中設置樣式，您可以執行以下操作

var css = {color: red}

和

<h1 style={css}>Hello world</h1>

為什么在第二個代碼片段中需要圍繞 css 的花括號？

Answer 1

大括號是一種特殊的語法，讓 JSX 解析器知道它需要將它們之間的內容解釋為 JavaScript 而不是字符串。

當您想在 JSX 中使用像變量或引用這樣的 JavaScript 表達式時，您需要它們。 因為如果你像這樣使用標准的雙引號語法：

var css = { color: red }

<h1 style="css">Hello world</h1>

JSX 不知道您打算在 style 屬性中使用變量css而不是字符串。 通過在變量css周圍放置花括號，您是在告訴解析器“獲取變量css的內容並將它們放在這里”。 （從技術上講是評估內容）

這個過程通常被稱為“插值”。

Answer 2

如果您不使用變量css ，則 JSX 可能如下所示：

<h1 style={ {color: 'red'} }>Hello world</h1>

我猜你對雙花括號感到困惑。

所以你知道 JSX 中的大括號意味着process the inner value in JavaScript ，所以外部大括號正是用於這個目的。

但是style屬性接受一個object 。 並且一個對象還需要另一對花括號將其包裹起來。 這就是內在的目的。

Answer 3

外大括號告訴 JSX 解析器語法應該被解釋為 javascript。 使用內部大括號是因為樣式變量接受一個對象。

讓我們分解一下：

<h1 style={interpret javascritp {interpret the object} }> hello </h1>

Answer 4

當您想在“html”內部（因此在渲染部分內部）使用變量的值時，您可以使用花括號。 這只是告訴應用程序獲取變量的值並將其放在那里的一種方式，而不是一個詞。