javascript - ReactJS:JSX 属性名称的模式

Question

我有以下 JSX 示例，它是一个 SVG 元素:

<svg className={className} viewBox="0 0 48 48" version="1.1"
  onClick={this.props.onClick} aria-label="Some random label">
  <g fill="none">
    <line strokeWidth="2" x1="24" y1="14" x2="24" y2="34"/>
    <line strokeWidth="2" x1="14" y1="24" x2="34" y2="24"/>
  </g>
</svg>

在原始 HTML 中，strokeWidth 表示为 stroke-width。在我看来，所有 JSX 属性都遵循驼峰格式。因此，我立即想到添加 ariaLabel 而不是 aria-label。

问题:JSX 属性是否有模式？如果是，为什么 aria-* 不遵循这种模式？

事实上，我喜欢使用 stroke-* 的想法，这样我就不必将我的原始 svg 预处理为 reactjs。

Answer 1

aria 属性是标准的 html 属性，React 决定保持原样的格式。他们确实指定您制作的任何自定义 html 属性都应以 data-* 为前缀，并且在此页面上似乎建议仅对这些特殊情况使用 attribute-* 语法 https://facebook.github.io/react/docs/jsx-gotchas.html

标准格式是驼峰式https://facebook.github.io/react/docs/dom-differences.html