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

Answer 2

PR 请求已合并到 React 中以传递所有 SVG 属性。感谢 Dan Abramov 致力于此。它将在下一个 React 版本中可用。

驼峰式风格现已弃用，但在警告后仍受支持。

在here

中查看更多内容

ReactJS：JSX 属性名称的模式

ReactJS: Pattern for JSX attribute names

javascript

svg

reactjs

react-jsx