JSX 格式化和可访问性

相关源文件

• react/README.md

本文档涵盖了 Airbnb JavaScript 风格指南中 JSX 的标准化格式约定和可访问性最佳实践。它提供了指南，以确保 JSX 代码的一致性、可读性，并对所有用户（包括残障人士）都是可访问的。有关 React 组件结构和生命周期方法的信息，请参阅 React 组件结构。有关 props 和状态管理的信息，请参阅 Props、State 和 Events。

JSX 格式指南

JSX 作为 JavaScript 的扩展，需要特定的格式约定来在代码库中保持可读性和一致性。以下部分详细介绍了编写 JSX 时应遵循的格式规则。

对齐

正确对齐 JSX 元素和属性可显著提高代码的可读性。请始终按照以下模式对齐多行 JSX 元素及其属性。

来源: react/README.md173-237

引号

一致使用引号有助于保持代码的统一性。

• JSX 属性使用双引号（"）。
• 所有其他 JavaScript 字符串使用单引号（'）。
• 这包括 JSX 属性中对象内的字符串值。

来源: react/README.md240-258

间距

适当的空格增强了可读性。

• 在自闭合标签中包含一个空格。
• 不要在 JSX 花括号中添加空格。

来源: react/README.md260-287

图表：JSX 格式约定

来源: react/README.md173-287

括号

当 JSX 标签跨越多行时，用括号将其括起来，以提高可读性并避免 JavaScript 的自动分号插入问题。

来源: react/README.md500-526

标签

标签格式有助于保持一致的代码结构。

• 始终自闭合没有子元素的标签。
• 将多行组件的标签放在新行上。

来源: react/README.md528-553

可访问性最佳实践

可访问的 JSX 可确保所有用户，包括残障人士，都能使用应用程序。正确实现可访问性功能既是最佳实践，通常也是法律要求。

图像可访问性

图像需要特别关注可访问性。

• 在 <img> 标签上始终包含 alt 属性。
• 对于装饰性图像，请为 alt 使用空字符串，或添加 role="presentation"。
• 避免在 alt 文本中使用“image”或“picture”等冗余词语。

来源: react/README.md325-351

ARIA 角色和属性

ARIA (Accessible Rich Internet Applications) 有助于使动态内容更具可访问性。

• 仅使用有效的、非抽象的 ARIA 角色。
• 不要使用 ARIA 规范中未包含的自定义或抽象角色。

来源: react/README.md352-364

图表：JSX 可访问性决策树

来源: react/README.md325-375

键盘可访问性

确保键盘用户可以与您的应用程序进行交互。

• 不要使用 accessKey 属性，因为它们可能与用户的屏幕阅读器或键盘快捷键冲突。
• 确保所有交互式元素都可以通过键盘进行操作。

来源: react/README.md365-375

列表的关键 props

渲染 JSX 列表时，始终为 key prop 使用稳定、唯一的标识符。

• 当列表顺序可能发生变化时，避免使用数组索引作为 key。
• 如果可能，请使用数据中的唯一 ID。

这可确保组件得到正确的协调，并防止组件状态和性能方面的问题。

来源: react/README.md377-400

最佳实践总结

JSX 格式清单

类别	规则
对齐	将多行组件的 props 放在单独的行上。
引号	JSX 属性使用双引号，JavaScript 字符串使用单引号。
间距	自闭合标签中包含空格，花括号中不包含空格。
括号	将多行 JSX 括在括号中。
标签	自闭合没有子元素的标签。

可访问性清单

类别	规则
图像	始终包含 alt 文本或 role="presentation"。
ARIA	仅使用有效的 ARIA 角色和属性。
键盘	不要使用 accessKey，确保键盘导航。
列表	对 key props 使用稳定的 ID，而不是数组索引。

通过遵循这些格式和可访问性指南，您将编写出既可读又具包容性的 JSX 代码，从而确保所有用户和开发人员在处理您的代码库时都能获得更好的体验。

来源: react/README.md