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属性都遵循camel-case格式。因此，我立即考虑添加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属性名称的模式

2 个答案: