Question

例如，要设置反应中的样式

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周围放置花括号，您告诉解析器＆＃34;获取变量css的内容并将它们放在这里＆＃34;。（从技术上讲，它评估内容）

此过程通常称为＆＃34;插值＆＃34;。

Answer 2

如果不使用变量css，JSX可能如下所示：

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

我猜你对双花括号感到困惑。

所以你知道JSX中的花括号意味着processing in a JavaScript way，所以外括号完全用于此目的。

但style属性接受object。而且一个物体还需要另一对花括号来包裹它。这是内在的目的。

Answer 3

外部花括号告诉JSX解析器该语法应解释为javascript。之所以使用内部括号，是因为style变量接受一个对象。

让我们分解一下：

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

Answer 4

如果要在“html”中使用变量的值（在渲染部分内部），可以使用花括号。这只是告诉应用程序获取变量值并将其放在那里的一种方式，而不是单词。