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

Question

来自 react docs

Note that all aria-* HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:

AFAIK，每个 HTML 属性在 react 中都被重命名为驼峰命名法。
有什么理由可以解释为什么aria-*是保留原名吗？
奖金，有没有人知道，应该是<input autoFocus='autofocus'/>或 <input autofocus='autofocus'/> .前者看起来是正确的，因为我的编辑器没有发出任何警告。但是属性名和它的值不一致吗？
应该也是autocomplete或 autoComplete ，而 auto 之间没有连字符和 complete在原始属性名称中？

Answer 1

React API 引用提供了一些关于此的信息。在 DOM Elements ， 它说:

In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute tabindex corresponds to the attribute tabIndex in React. The exception is aria-* and data-* attributes, which should be lowercased. For example, you can keep aria-label as aria-label.

栏目All Supported HTML Attributes给 autoComplete和 autoFocus作为预期的名称。

现在，这实际上并没有回答为什么 aria-*属性仍然是小写的，但至少它清楚地说明了它们应该如何使用。

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