export default function Profile() {
  return (
    
  )
}
1
2
3
4
5
6
7
8

function Profile() {
  return (
    
  );
}

export default function Gallery() {
  return (
    

      
了不起的科学家
      
      
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 陷阱
// 组件可以渲染其它组件，但是请不要嵌套它们的定义：
export default function Gallery() {
  // 🔴 永远不要在组件中定义组件
  function Profile() {
    // ...
  }
  // ...
}
// 上面这段代码非常慢，并且会导致bug产生。因此，你应该在顶层定义每个组件
export default function Gallery() {
  // ...
}
// ✅ 在顶层声明组件
function Profile() {
  // ...
}
// 当子组件需要使用父组件的数据时，你需要 通过 props 的形式进行传递，而不是嵌套定义。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  
海蒂·拉玛的待办事项
  
  

    ...
  


1
2
3
4
5
6
7
8
9
10
11
12

<>
  
海蒂·拉玛的待办事项
  
  

    ...
  


1
2
3
4
5
6
7
8
9
10
11
12

海蒂·拉玛的照片和待办事项的标签经修改后变为：

<>

  

  


      
发明一种新式交通信号灯

      
排练一个电影场景

      
改进频谱技术

  


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3. 使用驼峰式命名法给大部分属性命名！

JSX 最终会被转化为 JavaScript，而 JSX 中的属性也会变成 JavaScript 对象中的键值对。在你自己的组件中，经常会遇到需要用变量的方式读取这些属性的时候。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 - 符号或者像 class 这样的保留字。

这就是为什么在 React 中，大部分 HTML 和 SVG 属性都用驼峰式命名法表示。例如，需要用 strokeWidth 代替 stroke-width。由于 class 是一个保留字，所以在 React 中需要用 className 来代替。这也是 DOM 属性中的命名:

摘要

现在你知道了为什么我们需要 JSX 以及如何在组件中使用它：

• 由于渲染逻辑和标签是紧密相关的，所以 React 将它们存放在一个组件中。
• JSX 类似 HTML，不过有一些区别。如果需要的话可以使用 转化器 将 HTML 转化为 JSX。
• 错误提示通常会指引你将标签修改为正确的格式。

在JSX中通过大括号使用JavaScript

JSX 允许你在 JavaScript 中编写类似 HTML 的标签，从而使渲染的逻辑和内容可以写在一起。有时候，你可能想要在标签中添加一些 JavaScript 逻辑或者引用动态的属性。这种情况下，你可以在 JSX 的大括号内来编写 JavaScript。

使用引号传递字符串

当你想把一个字符串属性传递给 JSX 时，把它放到单引号或双引号中：

export default function Avatar() {
  return (
    
  );
}

1
2
3
4
5
6
7
8
9
10

但是如果你想要动态地指定 src 或 alt 的值呢？你可以 用 { 和 } 替代 " 和 " 以使用 JavaScript 变量 ：

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    
  );
}
1
2
3
4
5
6
7
8
9
10
11

使用大括号：一扇进入JavaScript世界的窗户

JSX是一种编写JavaScript的特殊方式。这为在括号{ } 中使用JavaScript带来了可能。

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    
{name}'s To Do List
  );
}
1
2
3
4
5
6

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

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'zh-CN',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    
To Do List for {formatDate(today)}
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

可以在哪使用大括号

在 JSX 中，只能在以下两种场景中使用大括号：

1. 用作 JSX 标签内的文本：

   {name}'s To Do List

   是有效的，但是 <{tag}>Gregorio Y. Zara's To Do List 无效。
2. 用作紧跟在 = 符号后的 属性：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 属性传递一个对象：

export default function TodoList() {
  return (
    
{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      
Improve the videophone
      
Prepare aeronautics lectures
      
Work on the alcohol-fuelled engine
    
  );
}
// 陷阱：内联style属性使用驼峰命名法编写。例如，HTML 
 在你的组件里应该写成 
{ backgroundColor: 'black' }}>。
1
2
3
4
5
6
7
8
9
10
11
12
13

JavaScript对象和大括号的更多可能

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

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

export default function TodoList() {
  return (
    

      
{person.name}'s Todos
      
      

        
Improve the videophone
        
Prepare aeronautics lectures
        
Work on the alcohol-fuelled engine
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

JSX 是一种模板语言的最小实现，因为它允许你通过 JavaScript 来组织数据和逻辑。

摘要

现在你几乎了解了有关 JSX 的一切：

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