为什么 react wai-aria 不在camelCase 中？

Question

来自反应文档

请注意，JSX 完全支持所有 aria-* HTML 属性。虽然 React 中的大多数 DOM 属性和属性都是驼峰式的，但这些属性应该是连字符（也称为 kebab-case、lisp-case 等），因为它们在纯 HTML 中：

AFAIK，每个 HTML 属性在反应中都被重命名为驼峰命名法。有什么理由可以解释为什么aria-*保留他们原来的名字吗？

奖金，有没有人知道，应该是<input autoFocus='autofocus'/>还是<input autofocus='autofocus'/>。前者看起来是正确的，因为我的编辑器没有发出任何警告。但是属性名和它的值不一致吗？

它也应该是autocomplete或autoComplete，而在原始属性名称中auto和之间没有连字符complete？

Answer 1

React API 参考提供了一些关于此的信息。在DOM Elements，它说：

在 React 中，所有 DOM 属性和属性（包括事件处理程序）都应该是驼峰式的。例如，HTML 属性tabindex对应tabIndex于 React 中的属性。例外是aria-*和data-*属性，它应该是小写的。例如，您可以保留aria-label为aria-label.

本节所有支持HTML属性赋予autoComplete和autoFocus作为预期的名称。

现在，这实际上并没有回答为什么的aria-*属性保持小写，但至少这是他们应如何使用一个明确的说法。

推测：也许这与 React 版本 15 和 16 之间发生的更改有关。博客文章“ React 16 中的 DOM 属性”解释说，React 16 现在允许自定义属性，而之前已将其删除。它描述了一些担忧，即内部属性白名单已成为维护负担，需要简化。现在可以在 JSX 中包含任意属性。我不知道这在内部是如何工作的，但我想这些aria-*属性在内部白名单的故事中扮演了一些角色。例如，WAI-ARIA 1.1 最近引入了几个新aria-*属性，WAI个性化语义内容模块工作草案引入了很多aui-*属性。这两个都需要列入白名单。