JavaScript 与花括号：在 JSX 中动态显示数据与属性

在上一关中，你学会了如何使用 JSX 编写界面标签。但如果 JSX 只能展示写死的文字和固定的图片，那它和静态 HTML 就没有任何差别了。

React 最强大的能力在于：它允许你在 JSX 标签中随时切换回 JavaScript，读取变量、调用函数、执行计算，从而动态展示数据。这个用来切换回 JavaScript 的“传送门”，就是 花括号 {}。

1. 在文本内容中使用花括号

假设你在组件顶部声明了一个变量：

const name = 'Katherine Johnson';

如果你直接写在 JSX 里：

<h1>name 的成就</h1>

页面上只会傻傻地显示出四个英文字母：“name 的成就”。因为在引号或普通标签内容里，JSX 把它们当作静态字符串字面量。

要让 React 把它当作 JavaScript 变量读取，只需要给它套上一对花括号：

<h1>{name} 的成就</h1>

现在，页面上就会动态呈现出：“Katherine Johnson 的成就”！

花括号里可以写什么？

花括号里可以写任何合法的 JavaScript 表达式（即任何能够计算出一个结果值的代码片段）：

变量：{name}
算术与运算：{2 + 2}
字符串拼接：{'你好，' + name}
函数调用：{formatDate(today)}

注意：花括号里只能放表达式（Expressions），不能放 JavaScript 语句（Statements）。比如你不能在花括号里直接写 {if (x) { ... }} 或 {for (...) { ... }}。

2. 在属性中使用花括号

除了在标签内部包裹文字，你还可以使用花括号来为 JSX 属性动态赋值。

对比以下两种写法：

// 1. 使用引号：传递的是写死的静态字符串 "avatar"
<img className="avatar" />

// 2. 使用花括号：传递的是 JavaScript 变量 avatarUrl 的值
<img src={avatarUrl} />

重要语法规则：在为属性动态传递 JavaScript 变量时，不要在花括号外面再套上引号！

src={avatarUrl}：正确！React 会读取 avatarUrl 变量的值。

src="{avatarUrl}"：错误！React 会把它当成一个名为 "{avatarUrl}" 的字面量字符串，图片必然加载失败。

3. 揭秘“双花括号”：内联样式与对象传递

初学 React 时，看到类似这样的代码往往会感到困惑：

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

为什么这里会有两层花括号？难道这是 React 的某种神秘特殊语法吗？

其实不是！只要拆开看，真相非常简单：

外层的花括号 { ... }：告诉 JSX “注意，我要进入 JavaScript 模式了！”；
内层的花括号 { backgroundColor: 'black', color: 'pink' }：就是一个普通的 JavaScript 对象字面量！

在 React 中，内联样式不是像 HTML 那样写成 style="background-color: black;" 的长字符串，而是写成一个 JavaScript 对象。因为是对象，所以属性名遵循驼峰命名（backgroundColor 而非 background-color）。

你完全可以先把这个对象单独存为一个变量，代码看起来就会更加清晰：

const myStyle = {
  backgroundColor: 'black',
  color: 'pink'
};

export default function TodoList() {
  return (
    <ul style={myStyle}>
      <li>整理房间</li>
    </ul>
  );
}

直接把 myStyle 内联写进标签里，就变成了两层花括号 style={{ ... }}。

4. 综合案例：整合对象与动态属性

我们来看一个完整的示例：将用户的信息、头像、主题样式整合在一个对象中，并在 JSX 里全部动态渲染出来：

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name} 的待办事项</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt={person.name}
      />
      <ul>
        <li>改进视频电话技术</li>
        <li>准备航空学讲座</li>
        <li>研究太阳能炊具</li>
      </ul>
    </div>
  );
}

总结

在 JSX 文本中，使用 {variable} 动态嵌入 JavaScript 变量；
在 JSX 属性中，使用 src={variable} 动态传递属性，切勿在外层加引号；
style={{ ... }} 中的双花括号不是特殊语法，而是 JSX 表达式窗口里包裹的一个普通 JavaScript 样式对象。

教学模式