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>

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

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

实际上，我喜欢使用 stroke-* 这样的属性，这样我就不必预处理我的原始 SVG 以适应 ReactJS。

- Alan Souza

Answer 1

The aria属性是标准的html属性，React决定保持其原样。它们确实指定了任何自定义的html属性都应该以data-*为前缀，并且在这个页面上似乎建议只针对这些特殊情况使用attribute-*语法 https://facebook.github.io/react/docs/jsx-gotchas.html 标准格式是驼峰式https://facebook.github.io/react/docs/dom-differences.html

- ecompton3

---

谢谢您的回答。但我仍然不明白为什么stroke-*属性不遵循相同的约定。 - Alan Souza

看起来，aria和自定义HTML这些东西是例外而不是规则。我会更新我的答案来指出这一点。标准的React东西是驼峰式命名的：https://facebook.github.io/react/docs/dom-differences.html - ecompton3

Answer 2

React已经合并了一个PR请求，以传递所有的SVG属性。感谢Dan Abramov的努力工作。它将在下一个React版本中提供。

驼峰式命名现已过时，但在警告后仍得到支持。

更多请参见这里。

- Alan Souza