问题
For an example, to set a style in react you could do
var css = {color: red}
and
<h1 style={css}>Hello world</h1>
Why do you need the curly braces around css in the second code snippet?
回答1:
The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string.
You need them when you want to use a JavaScript expression like a variable or a reference inside JSX. Because if you use the standard double quote syntax like so:
var css = { color: red }
<h1 style="css">Hello world</h1>
JSX doesn't know you meant to use the variable css in the style attribute instead of the string. And by placing the curly braces around the variable css, you are telling the parser "take the contents of the variable css and put them here". (Technically its evaluating the content)
This process is generally referred to as "interpolation".
回答2:
If you don't use the variable css, the JSX could look like this:
<h1 style={ {color: 'red'} }>Hello world</h1>
I guess you are confused about the double curly braces.
so you know that the curly braces in JSX means processing in a JavaScript way, so the outer braces is used exactly for this purpose.
But the style property accepts an object. And an object also needs another pair of curly braces to wrap it up. That's the purpose for the inner ones.
回答3:
You put curly braces when you want to use the value of a variable inside "html" (so inside the render part). It's just a way of telling the app to take the value of the variable and put it there, as opposed to a word.
来源：https://stackoverflow.com/questions/43904825/what-do-curly-braces-mean-in-jsx-react