JSX（React）中的花括号是什么意思？答案

【问题标题】：What do curly braces mean in JSX (React)?JSX（React）中的花括号是什么意思？
【发布时间】：2017-10-09 19:56:55
【问题描述】：

例如，要在 react 中设置样式，您可以这样做

var css = {color: red}

和

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

为什么在第二个代码 sn-p 中需要在 css 周围加上花括号？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

var css = { color: red }

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

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

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

【讨论】：

那么它为什么不像 JavaScript 的其他部分那样仅仅将缺少引号解释为不是字符串呢？
因为这就是 JSX 的设置方式及其解析器的工作方式。 <h1 style={css}> 在技术上不是 JavaScript。它是 JSX，当你想在 JSX 中使用 JS 表达式时，它的语法需要花括号。

【解决方案3】：

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

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

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

所以你知道 JSX 中的大括号表示process the inner value in JavaScript，所以外大括号正是用于此目的。

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

【讨论】：

【解决方案4】：

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

让我们分解一下：

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

【讨论】：