React 在 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" 就是被作为字符串传递的。

但是如果你想要动态地指定 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}
/>
);
}

 在HTML中，<img> 标签的 alt 属性用于为图像提供替代文本。当图像无法显示时（例如由于网络问题、路径错误、浏览器禁用图像或用户使用屏幕阅读器），这个替代文本会显示出来，以帮助用户理解图像的内容。

请注意 className="avatar" 和 src={avatar} 之间的区别，className="avatar" 指定了一个就叫 "avatar" 的使图片在样式上变圆的 CSS 类名，而 src={avatar} 这种写法会去读取 JavaScript 中 avatar 这个变量的值。这是因为大括号可以使你直接在标签中使用 JavaScript！

 大括号内的任何 JavaScript 表达式都能正常运行，包括像 formatDate() 这样的函数调用：

const today = new Date();

function formatDate(date) {

  return new Intl.DateTimeFormat(

    'zh-CN',

    { 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 中传递，你必须用另一对额外的大括号包裹对象：

person={{ name: "Hedy Lamarr", inventions: 5 }}。

你可能在 JSX 的内联 CSS 样式中就已经见过这种写法了。React 不要求你使用内联样式（使用 CSS 类就能满足大部分情况）。但是当你需要内联样式的时候，你可以给 style 属性传递一个对象：

<ul> 标签定义无序列表。

将 <ul> 标签与 <li> 标签一起使用，创建无序列表。

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>

  );

}

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

JavaScript 对象和大括号的更多可能
你可以将多个表达式合并到一个对象中，在 JSX 的大括号内分别使用它们：

 

const person = {

  name: 'Gregorio Y. Zara',

  theme: {

    backgroundColor: 'green',

    color: 'pink'

  }

};

export default function TodoList() {

  return (

    <div style={person.theme}>

      <h1>{person.name}'的待办事项</h1>

      <img

        className="avatar"

        src="https://i.imgur.com/7vQD0fPs.jpg"

        alt="Gregorio Y. Zara"

      />

      <ul>

        <li>优化视屏电话</li>

        <li>准备航空学课程</li>

        <li>研究乙醇燃料引擎</li>

      </ul>

    </div>

  );

}

 

 

JSX 引号内的值会作为字符串传递给属性。
大括号让你可以将 JavaScript 的逻辑和变量带入到标签中。
它们会在 JSX 标签中的内容区域或紧随属性的 = 后起作用。
{{ 和 }} 并不是什么特殊的语法：它只是包在 JSX 大括号内的 JavaScript 对象。