在 JSX 中使用花括号嵌入 JavaScript

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

你将学习

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

传递带引号的字符串

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

分支

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 中的值，将 " 和 " 替换为 { 和 }

分支

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> 标签中

分支

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()

分支

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 属性。

分支

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 花括号内的 JavaScript 对象！

陷阱

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

使用 JavaScript 对象和花括号的更多乐趣

您可以将多个表达式移到一个对象中，并在 JSX 中的花括号内引用它们。

分支

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'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>
  );
}

在此示例中，person JavaScript 对象包含一个 name 字符串和一个 theme 对象。

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

组件可以像这样使用 person 中的这些值。

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

JSX 作为一种模板语言非常简洁，因为它允许您使用 JavaScript 组织数据和逻辑。

回顾

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

引号内的 JSX 属性作为字符串传递。
花括号允许您将 JavaScript 逻辑和变量引入标记中。
它们在 JSX 标签内容内部或属性中 = 之后立即起作用。
{{ 和 }} 不是特殊语法：它只是一个隐藏在 JSX 花括号内的 JavaScript 对象。

尝试一些挑战

挑战 1的 3:
修复错误

此代码崩溃，并显示错误消息 对象作为 React 子级无效。

分支

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 编写标记

下一页将 Props 传递给组件