JSX 中的 JavaScript 与大括号
JSX 允许你在 JavaScript 文件中编写类似 HTML 的标记，将渲染逻辑和内容保持在同一个地方。有时你可能想在该标记中添加一点 JavaScript 逻辑或引用动态属性。在这种情况下，你可以在 JSX 中使用大括号来打开通往 JavaScript 的窗口。
您将学习
- 如何使用引号传递字符串
- 如何使用大括号在 JSX 内引用 JavaScript 变量
- 如何使用大括号在 JSX 内调用 JavaScript 函数
- 如何使用大括号在 JSX 内使用 JavaScript 对象
使用引号传递字符串
当你想向 JSX 传递字符串属性时，可以将其放在单引号或双引号中：
这里，"https://i.imgur.com/7vQD0fPs.jpg" 和 "Gregorio Y. Zara"是作为字符串传递的。
但如果你想动态指定 src 或 alt文本呢？你可以通过将 " 和 "替换为{ 和 }来使用 JavaScript 中的值：
请注意 className="avatar" 与 src={avatar}之间的区别：前者指定了一个名为"avatar"的 CSS 类名，使图像变圆；而后者读取名为avatar的 JavaScript 变量的值。这是因为大括号让你可以直接在标记中使用 JavaScript！
使用大括号：通往 JavaScript 世界的窗口
JSX 是一种特殊的 JavaScript 编写方式。这意味着可以在其中使用 JavaScript——通过大括号{ }。下面的示例首先声明了科学家的名字 name，然后使用大括号将其嵌入到 <h1>中：
尝试将 name 的值从 'Gregorio Y. Zara'改为'Hedy Lamarr'。看到列表标题如何变化了吗？
任何 JavaScript 表达式都可以在大括号内使用，包括像formatDate()这样的函数调用：
大括号的使用位置
在 JSX 内部，你只能通过两种方式使用大括号：
- 作为文本直接放在 JSX 标签内：
<h1>{name}'s To Do List</h1>是有效的，但<{tag}>Gregorio Y. Zara's To Do List</{tag}>则无效。 - 作为属性 紧跟在
=符号之后：src={avatar}会读取avatar变量，但src="{avatar}"会传递字符串"{avatar}"。
使用“双大括号”：JSX 中的 CSS 和其他对象
除了字符串、数字和其他 JavaScript 表达式之外，你甚至可以在 JSX 中传递对象。对象也用大括号表示，例如{ name: "Hedy Lamarr", inventions: 5 }。因此，要在 JSX 中传递一个 JS 对象，你必须用另一对大括号包裹该对象：person={{ name: "Hedy Lamarr", inventions: 5 }}。
你可能会在 JSX 的内联 CSS 样式中看到这种情况。React 不要求你使用内联样式（CSS 类在大多数情况下效果很好）。但当你需要内联样式时，可以将一个对象传递给style 属性：
尝试修改 backgroundColor 和 color的值。
当你这样书写时，可以清晰地看到花括号内的 JavaScript 对象：
下次你在 JSX 中看到{{ 和 }}，要知道它只不过是 JSX 花括号内的一个对象！
注意
内联 style属性使用驼峰式命名。例如，HTML 中的<ul style="background-color: black">在你的组件中应写为<ul style={{ backgroundColor: 'black' }}>。
JavaScript 对象和花括号的更多玩法
你可以将多个表达式放入一个对象中，然后在 JSX 的花括号内引用它们：
在这个例子中，personJavaScript 对象包含一个name字符串和一个theme对象：
组件可以像这样使用 person中的值：
JSX 作为一种模板语言非常简洁，因为它允许你使用 JavaScript 来组织数据和逻辑。
回顾
现在你几乎了解了关于 JSX 的一切：
- 引号内的 JSX 属性作为字符串传递。
- 花括号让你可以将 JavaScript 逻辑和变量引入到标记中。
- 它们可以在 JSX 标签内容内部或紧接在属性中的
=之后使用。 {{和}}不是特殊语法：它是一个包裹在 JSX 花括号内的 JavaScript 对象。