在 JSX 中使用花括号嵌入 JavaScript 代码

JSX 允许你在 JavaScript 文件中编写类似 HTML 的标记，使渲染逻辑和内容保持在同一位置。有时你可能需要添加一些 JavaScript 逻辑或引用标记内的动态属性。在这种情况下，你可以在 JSX 中使用花括号来打开一个 JavaScript 的窗口。

你将学习

如何使用引号传递字符串
如何使用花括号在 JSX 中引用 JavaScript 变量
如何使用花括号在 JSX 中调用 JavaScript 函数
如何使用花括号在 JSX 中使用 JavaScript 对象

使用引号传递字符串

当你想向 JSX 传递字符串属性时，你将其放在单引号或双引号中。

Fork

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

这里，"https://i.imgur.com/7vQD0fPs.jpg" 和 "Gregorio Y. Zara" 作为字符串传递。

但是，如果你想动态地指定 src 或 alt 文本呢？你可以使用 JavaScript 中的值，用 { 和 } 替换 "

Fork

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

注意 className="avatar" 和 src={avatar} 之间的区别。前者指定了一个名为 "avatar" 的 CSS 类名，使图像呈圆形；后者读取名为 avatar 的 JavaScript 变量的值。这是因为花括号允许你在标记中直接使用 JavaScript！

使用花括号：通往 JavaScript 世界的窗口

JSX 是一种特殊的 JavaScript 写法。这意味着可以在其中使用 JavaScript——使用花括号 { }。下面的例子首先声明科学家的名字 name，然后使用花括号将其嵌入到 <h1> 中。

Fork

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

尝试将 name 的值从 'Gregorio Y. Zara' 更改为 'Hedy Lamarr'。看看列表标题是如何变化的？

任何 JavaScript 表达式都可以在花括号之间使用，包括像 formatDate() 这样的函数调用。

Fork

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

花括号的使用位置

你只能在 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 属性。

Fork

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

尝试更改 backgroundColor 和 color 的值。

当你这样写的时候，你就可以真正看到花括号内的 JavaScript 对象了。

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

下次你在 JSX 中看到 {{ 和 }}，要知道它只不过是 JSX 花括号内的对象！

陷阱

内联 style 属性使用驼峰命名法编写。例如，HTML <ul style="background-color: black"> 在你的组件中将被写成 <ul style={{ backgroundColor: 'black' }}>。

回顾

现在你几乎了解了关于 JSX 的所有知识。

JSX 属性在引号内作为字符串传递。
花括号允许你将 JavaScript 逻辑和变量引入你的标记。
它们可以在 JSX 标签内容内使用，或者在属性中的 = 后立即使用。
{{ 和 }} 不是特殊的语法：它是 JSX 花括号中包含的 JavaScript 对象。

尝试一些挑战

挑战 1的 3:
修正错误

这段代码崩溃并显示错误消息 Objects are not valid as a React child

Fork

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

你能找到问题吗？

上一页使用 JSX 编写标记

下一页向组件传递属性

在 JSX 中使用花括号嵌入 JavaScript 代码

你将学习

使用引号传递字符串

使用花括号：通往 JavaScript 世界的窗口

花括号的使用位置

使用“双花括号”：JSX 中的 CSS 和其他对象

陷阱

更多关于 JavaScript 对象和花括号的乐趣

回顾

尝试一些挑战

挑战 1的 3: 修正错误

挑战 1的 3:
修正错误