花括号在JSX(React)中意味着什么？

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不知道你打算css在style属性中使用变量而不是字符串.通过在变量周围放置花括号css,您告诉解析器"获取变量的内容css并将它们放在此处".(从技术上讲,它评估内容)

该过程通常称为"插值".

Answer 2

如果你不使用变量css,JSX可能如下所示:

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

我想你对双花括号感到困惑.

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

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

Answer 3

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

让我们分解一下：

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

Answer 4

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