ReactJS: template for JSX attribute names

Question

I have the following JSX sample, which is an SVG element:

<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>

The raw HTML strokeWidthis represented as stroke-width. It seems to me that all the JSX attributes are in camel format. So, I immediately thought about adding ariaLabelinstead aria-label.

Question : Is there a template for JSX attributes? If so, why aria-*not follow this pattern?

Actually, I like the idea of ​​having it stroke-*, so I don’t need to pre-process my raw svg for the reaction.

Answer 1

PR React SVG. . React.

, - .

Answer 2

aria - html, React . , html, , data-*, , , attribute-* https://facebook.imtqy.com/react/docs/jsx-gotchas.html

- https://facebook.imtqy.com/react/docs/dom-differences.html