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>
  );
}

尝试将名称的值从“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 中以两种方式使用大括号：

• 1. 作为直接在 JSX 标签内的文本：<h1>{name}'s To Do List</h1> 有效，但 <{tag}>Gregorio Y. Zara's To Do List</{tag}> 无效。
• 2. 作为紧跟在 = 符号之后的属性：src={avatar} 将读取 avatar 变量，但 src="{avatar}" 将传递字符串“{avatar}”。

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

除了字符串、数字和其他 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 和颜色的值。

当你这样写时，你真的可以看到大括号内的 JavaScript 对象：

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

下次你在 JSX 中看到 {{ 和 }} 时，要知道它只不过是 JSX 卷曲内的一个对象！

"陷阱

内联样式属性以驼峰式命名。 例如，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 对象。