在 JSX 中通过大括号使用 JavaScript | JavaScript in JSX with Curly Braces

使用引号传递字符串 | Passing strings with quotes

When you want to pass a string attribute to JSX, you put it in single or double quotes: 当你想把一个字符串属性传递给 JSX 时，把它放到单引号或双引号中：

Here, "https://i.imgur.com/7vQD0fPs.jpg" and "Gregorio Y. Zara" are being passed as strings. 这里的 "https://i.imgur.com/7vQD0fPs.jpg" 和 "Gregorio Y. Zara" 就是被作为字符串传递的。

But what if you want to dynamically specify the src or alt text? You could use a value from JavaScript by replacing " and " with { and }: 但是如果你想要动态地指定 src 或 alt 的值呢？你可以 用 { 和 } 替代 " 和 " 以使用 JavaScript 变量 ：

Notice the difference between className="avatar", which specifies an "avatar" CSS class name that makes the image round, and src={avatar} that reads the value of the JavaScript variable called avatar. That’s because curly braces let you work with JavaScript right there in your markup! 请注意 className="avatar" 和 src={avatar} 之间的区别，className="avatar" 指定了一个就叫 "avatar" 的使图片在样式上变圆的 CSS 类名，而 src={avatar} 这种写法会去读取 JavaScript 中 avatar 这个变量的值。这是因为大括号可以使你直接在标签中使用 JavaScript！

使用大括号：一扇进入 JavaScript 世界的窗户 | Using curly braces: A window into the JavaScript world

JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces { }. The example below first declares a name for the scientist, name, then embeds it with curly braces inside the <h1>: JSX 是一种编写 JavaScript 的特殊方式。这为在大括号 { } 中使用 JavaScript 带来了可能。下面的示例中声明了科学家的名字，name，然后在 <h1> 后的大括号内嵌入它：

Try changing the name’s value from 'Gregorio Y. Zara' to 'Hedy Lamarr'. See how the list title changes? 试着将 name 的值从 'Gregorio Y. Zara' 更改成 'Hedy Lamarr'。看看这个 To Do List 的标题将如何变化？

Any JavaScript expression will work between curly braces, including function calls like formatDate(): 大括号内的任何 JavaScript 表达式都能正常运行，包括像 formatDate() 这样的函数调用：

可以在哪使用大括号 | Where to use curly braces

You can only use curly braces in two ways inside JSX: 在 JSX 中，只能在以下两种场景中使用大括号：

1. As text directly inside a JSX tag: <h1>{name}'s To Do List</h1> works, but <{tag}>Gregorio Y. Zara's To Do List</{tag}> will not.

• 用作 JSX 标签内的文本：<h1>{name}'s To Do List</h1> 是有效的，但是 <{tag}>Gregorio Y. Zara's To Do List</{tag}> 无效。

2. As attributes immediately following the = sign: src={avatar} will read the avatar variable, but src="{avatar}" will pass the string "{avatar}".

• 用作紧跟在 = 符号后的 属性：src={avatar} 会读取 avatar 变量，但是 src="{avatar}" 只会传一个字符串 {avatar}。

使用 “双大括号”：JSX 中的 CSS 和 对象 | Using “double curlies”: CSS and other objects in JSX

In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like { name: "Hedy Lamarr", inventions: 5 }. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: person={{ name: "Hedy Lamarr", inventions: 5 }}. 除了字符串、数字和其它 JavaScript 表达式，你甚至可以在 JSX 中传递对象。对象也用大括号表示，例如 { name: "Hedy Lamarr", inventions: 5 }。因此，为了能在 JSX 中传递，你必须用另一对额外的大括号包裹对象：person={{ name: "Hedy Lamarr", inventions: 5 }}。

You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the style attribute: 你可能在 JSX 的内联 CSS 样式中就已经见过这种写法了。React 不要求你使用内联样式（使用 CSS 类就能满足大部分情况）。但是当你需要内联样式的时候，你可以给 style 属性传递一个对象：

Try changing the values of backgroundColor and color. 试着更改一下 backgroundColor 和 color 的值。

You can really see the JavaScript object inside the curly braces when you write it like this: 当你写成这样时，你可以很清楚地看到大括号里包着的对象：

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

The next time you see {{ and }} in JSX, know that it’s nothing more than an object inside the JSX curlies! 所以当你下次在 JSX 中看到 {{ 和 }}时，就知道它只不过是包在大括号里的一个对象罢了！

JavaScript 对象和大括号的更多可能 | More fun with JavaScript objects and curly braces

You can move several expressions into one object, and reference them in your JSX inside curly braces: 你可以将多个表达式合并到一个对象中，在 JSX 的大括号内分别使用它们：

In this example, the person JavaScript object contains a name string and a theme object: 在这个示例中，person JavaScript 对象包含 name 中存储的字符串和 theme 对象：

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

The component can use these values from person like so: 该组件可以这样使用来自 person 的值：

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript. JSX 是一种模板语言的最小实现，因为它允许你通过 JavaScript 来组织数据和逻辑。