大括号是一种特殊的语法，让 JSX 解析器知道它需要将它们之间的内容解释为 JavaScript 而不是字符串。

当您想在 JSX 中使用像变量或引用这样的 JavaScript 表达式时，您需要它们。因为如果你像这样使用标准的双引号语法：

var css = { color: red }

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

JSX 不知道您打算css在 style 属性中使用变量而不是字符串。通过在变量周围放置花括号css，您是在告诉解析器“获取变量的内容css并将它们放在这里”。（从技术上讲是评估内容）

这个过程通常被称为“插值”。

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

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

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

所以你知道 JSX 中的大括号意味着process the inner value in JavaScript，所以外大括号正是用于这个目的。

但是该style属性接受一个object. 并且一个对象还需要另一对花括号将其包裹起来。这就是内在的目的。

外大括号告诉 JSX 解析器语法应该被解释为 javascript。使用内部大括号是因为样式变量接受一个对象。

让我们分解一下：

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

当您想在“html”内部（因此在渲染部分内部）使用变量的值时，您可以使用花括号。这只是告诉应用程序获取变量的值并将其放在那里的一种方式，而不是一个词。