展示数据

JSX 使得你将标记夹在 JavaScript 当中。花括号则使得你可以“转义”回到 JavaScript，以便你嵌入代码中的变量并将其展示给用户。

例如，这个例子会展示 user.name：

return (
  <h1>
    {user.name}
  </h1>
);

你还可以从 JSX 属性中“转义”到 JavaScript，但你必须使用花括号代替原先的引号。 例如，className="avatar" 将字符串 "avatar" 作为 CSS 类传递，但 src={user.imageUrl} 读取 JavaScript 变量 user.imageUrl 的值，然后将该值传递作为 src 属性：

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

你也可以在 JSX 中放入更复杂的表达式，比如字符串拼接：

App.js：

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

在上面例子中，style={{}} 不是特殊语法，而是 style={} JSX 花括号内常规的 {} 对象。当你的样式依赖于 JavaScript 变量时，可以使用 style 属性。