使用 JSX 编写标记

JSX是一种 JavaScript 语法扩展，允许你在 JavaScript 文件中编写类似 HTML 的标记。虽然还有其他编写组件的方式，但大多数 React 开发者偏爱 JSX 的简洁性，大多数代码库也使用它。

JSX：将标记放入 JavaScript

Web 建立在 HTML、CSS 和 JavaScript 之上。多年来，Web 开发者将内容放在 HTML 中，设计放在 CSS 中，逻辑放在 JavaScript 中——通常放在不同的文件中！内容在 HTML 中进行标记，而页面的逻辑则单独存在于 JavaScript 中：

HTML

JavaScript

但随着 Web 变得更加交互式，逻辑越来越决定内容。JavaScript 负责 HTML！这就是为什么在 React 中，渲染逻辑和标记共存于同一个地方——组件中。

Sidebar.jsReact 组件

Form.jsReact 组件

将按钮的渲染逻辑和标记保持在一起，可以确保它们在每次编辑时保持同步。相反，不相关的细节（例如按钮的标记和侧边栏的标记）彼此隔离，使得单独更改其中任何一个更加安全。

每个 React 组件都是一个 JavaScript 函数，可能包含一些 React 渲染到浏览器中的标记。React 组件使用一种称为 JSX 的语法扩展来表示该标记。JSX 看起来很像 HTML，但它更严格一些，并且可以显示动态信息。理解这一点的最佳方法是将一些 HTML 标记转换为 JSX 标记。

将 HTML 转换为 JSX

假设你有一些（完全有效的）HTML：

并且你想将其放入你的组件中：

如果直接复制粘贴，它将无法工作：

这是因为 JSX 比 HTML 更严格，并且有更多规则！如果你阅读上面的错误信息，它们将指导你修复标记，或者你可以按照下面的指南操作。

JSX 的规则

1. 返回单个根元素

要从组件返回多个元素，请用单个父标签包装它们。

例如，你可以使用一个<div>：

如果你不想在标记中添加额外的<div>，可以写成 <> 和 </>：

这个空标签被称为 片段。片段让你可以对元素进行分组，而不会在浏览器的 HTML 树中留下任何痕迹。

2. 闭合所有标签

JSX 要求标签必须显式闭合：自闭合标签如<img>必须写成<img />，而包裹标签如 <li>oranges 必须写成 <li>oranges</li>。

以下是海蒂·拉玛的图片和列表项闭合后的样子：

3. 对大多数属性使用驼峰式命名！

JSX 会转换为 JavaScript，而写在 JSX 中的属性会成为 JavaScript 对象的键。在你自己的组件中，你通常会希望将这些属性读取到变量中。但 JavaScript 对变量名有限制。例如，变量名不能包含连字符，也不能是像class这样的保留字。

这就是为什么在 React 中，许多 HTML 和 SVG 属性都采用驼峰式命名。例如，使用stroke-width。由于strokeWidth而不是class是保留字，在 React 中你应写成className，其命名源自 相应的 DOM 属性：

你可以在DOM 组件属性列表中查找所有这些属性。如果你写错了，不用担心——React 会在 打印一条包含可能修正建议的消息。浏览器控制台

专业提示：使用 JSX 转换器

转换现有标记中的所有属性可能很繁琐！我们建议使用 转换器来将你现有的 HTML 和 SVG 转换为 JSX。转换器在实践中非常有用，但仍然值得理解其背后的原理，以便你能自如地自己编写 JSX。

这是你的最终结果：

回顾

现在你知道了 JSX 存在的原因以及如何在组件中使用它：

• React 组件将渲染逻辑与标记组合在一起，因为它们是相关的。
• JSX 与 HTML 类似，但有一些区别。如果需要，你可以使用转换器。
• 错误信息通常会指引你朝着修复标记的正确方向前进。