JSX 中带有大括号的 JavaScript

JSX 允许您在 JavaScript 文件中编写类似 HTML 的标记，将渲染逻辑和内容保持在同一个位置。有时，您需要添加一些 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"

但是，如果要动态指定 or 文本，该怎么办？您可以通过将 “ 和 ” 替换为 { 和 } 来使用 JavaScript 中的值：srcalt

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

请注意 之间的区别，前者指定使图像变圆的 CSS 类名，后者读取名为 的 JavaScript 变量的值。这是因为大括号可以让你在标记中使用 JavaScript！className="avatar""avatar"src={avatar}avatar

使用大括号：进入 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 中，您只能以两种方式使用大括号：

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

使用“双卷曲”：JSX 中的 CSS 和其他对象

除了字符串、数字和其他 JavaScript 表达式之外，您甚至可以在 JSX 中传递对象。对象也用大括号表示，例如 .因此，要在 JSX 中传递 JS 对象，必须将该对象换行在另一对大括号中：.{ name: "Hedy Lamarr", inventions: 5 }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>
  );
}

尝试更改 和 的值。backgroundColorcolor

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

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