第十三篇 描述UI-使用JSX编写标记
使用JSX编写标记
JSX 是 JavaScript 的语法扩展，可让您在 JavaScript 文件中编写类似 HTML 的标记。 尽管还有其他方式来编写组件，但大多数 React 开发人员更喜欢 JSX 的简洁性，并且大多数代码库都使用它。
你将学习
- 为什么 React 将标记与渲染逻辑混合在一起
- JSX 与 HTML 有何不同
- 如何用 JSX 显示信息
JSX：将标记放入 JavaScript
Web 是建立在 HTML、CSS 和 JavaScript 之上的。 多年来，Web 开发人员将内容保存在 HTML 中，将设计保存在 CSS 中，将逻辑保存在 JavaScript 中——通常在单独的文件中！ 内容在 HTML 中标记，而页面的逻辑在 JavaScript 中单独存在：
HTML
JavaScript
但随着 Web 变得更具交互性，逻辑越来越决定内容。 JavaScript 负责 HTML！ 这就是为什么在 React 中，渲染逻辑和标记一起存在于同一个地方——组件。
Sidebar.js React component
Form.js React component
将按钮的呈现逻辑和标记保持在一起可确保它们在每次编辑时都保持同步。 相反，不相关的细节，例如按钮的标记和侧边栏的标记，彼此隔离，从而更安全地自行更改其中任何一个。
每个 React 组件都是一个 JavaScript 函数，其中可能包含 React 呈现到浏览器中的一些标记。 React 组件使用称为 JSX 的语法扩展来表示该标记。 JSX 看起来很像 HTML，但更严格一些，并且可以显示动态信息。 理解这一点的最好方法是将一些 HTML 标记转换为 JSX 标记。
注意
JSX 和 React 是两个独立的东西。 它们经常一起使用，但您可以单独使用它们。 JSX 是一个语法扩展，而 React 是一个 JavaScript 库。
将 HTML 转换为 JSX
假设您有一些（完全有效的）HTML：
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
<li>Invent new traffic lights
<li>Rehearse a movie scene
<li>Improve the spectrum technology
</ul>
且你想把它放到你的组件中：
export default function TodoList() {
return (
// ???
)
}
如果您按原样复制并粘贴它，它将不起作用：
export default function TodoList() {
return (
// This doesn't quite work!
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
<li>Invent new traffic lights
<li>Rehearse a movie scene
<li>Improve the spectrum technology
</ul>
);
}
Error
/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:4)
3 | // This doesn't quite work!
4 | <h1>Hedy Lamarr's Todos</h1>
> 5 | <img
| ^
6 | src="https://i.imgur.com/yXOvdOSs.jpg"
7 | alt="Hedy Lamarr"
8 | class="photo"
这是因为 JSX 比 HTML 更严格并且有更多的规则！ 如果您阅读了上面的错误消息，它们会指导您修复标记，或者您可以按照下面的指南进行操作。
注意
大多数时候，React 的屏幕错误消息会帮助您找到问题所在。 如果您遇到困难，请读一读！
JSX 规则
1.返回单个根元素
要从组件返回多个元素，请使用单个父标记将它们包装起来。
例如，您可以使用 <div>：
<div>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
...
</ul>
</div>
如果你不想在你的标记中添加额外的 <div> ，你可以写 <> 和 </> 代替：
<>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
...
</ul>
</>
这个空标签称为Fragment。 Fragment让可以对事物进行分组，而不会在浏览器 HTML 树中留下任何痕迹。
深度阅读: 为什么需要包裹多个 JSX 标签？
JSX 看起来像 HTML，但在底层它被转换为普通的 JavaScript 对象。 如果不将它们包装到数组中，就不能从函数返回两个对象。 这解释了为什么你也不能返回两个 JSX 标签而不将它们包装到另一个标签或 Fragment 中。
2.闭合所有标签
JSX 要求标签显式闭合：像 <img> 这样的自闭合标签必须变成 <img />，而像 <li>oranges 这样的包装标签必须写成 <li>oranges</li>。
Hedy Lamarr 的图像和列表项看起来是这样关闭的：
<>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
/>
<ul>
<li>Invent new traffic lights</li>
<li>Rehearse a movie scene</li>
<li>Improve the spectrum technology</li>
</ul>
</>
3. 大部分的东西都适用驼峰命名！
JSX 变成 JavaScript，用 JSX 写的属性变成 JavaScript 对象的键。 在您自己的组件中，您通常希望将这些属性读入变量。 但是 JavaScript 对变量名有限制。 例如，它们的名称不能包含破折号或像 class 这样的保留字。
这就是为什么在 React 中，许多 HTML 和 SVG 属性都是用驼峰式命名的。 例如，您使用 strokeWidth 而不是 stroke-width。 由于 class 是一个保留字，在 React 中，您改为编写 className ，以相应的 DOM 属性命名：
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
className="photo"
/>
您可以在 DOM 组件属性列表中找到所有这些属性。 如果你弄错了，别担心——React 会向浏览器控制台打印一条消息，其中包含可能的更正。
"陷阱
由于历史原因，aria-* 和 data-* 属性在 HTML 中使用破折号编写。
专业提示：使用 JSX 转换器
转换现有标记中的所有这些属性可能很乏味！ 我们建议使用转换器将现有的 HTML 和 SVG 转换为 JSX。 转换器在实践中非常有用，但仍然值得了解发生了什么，这样你才能轻松地自己编写 JSX。
这是您的最终结果：
export default function TodoList() {
return (
<>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
className="photo"
/>
<ul>
<li>Invent new traffic lights</li>
<li>Rehearse a movie scene</li>
<li>Improve the spectrum technology</li>
</ul>
</>
);
}
回顾
现在你知道为什么 JSX 存在以及如何在组件中使用它了：
- React 组件将渲染逻辑与标记组合在一起，因为它们是相关的。
- JSX 类似于 HTML，但有一些不同。 如果需要，您可以使用转换器。
- 错误消息通常会为您指明修复标记的正确方向。
