JSXの不一致な標準属性[一源一世界][そのReact]

ReactのJSXに関する公式ドキュメントを読むと、JSXがdivなどの標準HTML要素の属性を宣言する際に、classNameなどの標準属性と命名上少し異なる特殊な属性があることがわかります.

var myDivElement = 
;

经过JSX编译器后，它的实际JS代码如下：

var myDivElement = React.createElement("div", { className: "foo" });

表示、classはJavascriptの保留キーワードなので、オブジェクトのkeyとして使用できませんが、どのような属性がありますか?ソースコードを直接見ましょう.HTMLDOMPropertyConfig.jsのソースコードには、JSXとHTML標準属性命名における異なる属性対応関係が宣言されており、現在4つある.

DOMAttributeNames: {
  acceptCharset: 'accept-charset',
  className: 'class',
  htmlFor: 'for',
  httpEquiv: 'http-equiv',
},

DOMProperty.jsのinjectDOMPropertyConfigにて、DOMAttributeNamesにてJSX属性に対応する標準属性及びその値を取得する

if (DOMAttributeNames.hasOwnProperty(propName)) {
  var attributeName = DOMAttributeNames[propName];
  propertyInfo.attributeName = attributeName;
  ...
}

これでJSX属性とHTML標準属性の変換が簡単に完了しました
余談ですが、JSX Gotchasという記事では、標準のHTML要素について、Reactは標準属性(nameなど)のみをレンダリングし、danielなどのカスタム属性は、接頭辞data-またはaria-(data-daniel or aria-danielなど)を付けない限り無視されます.
では、ソースコードから見てみましょう.(注:カスタムコンポーネントタイプのプロパティは、ソースコードの中で処理されていないため、上記のルールに拘束されません.DOMProperty.jsのinjectDOMPropertyConfigコードではdomPropertyConfig.Propertiesを巡回するだけで、domPropertyConfig.Propertiesはいくつかの標準属性を定義しているので、非標準属性は無視されます.

var Properties = domPropertyConfig.Properties || {};
...

for (var propName in Properties) {
    ....
}

HTMLDOMPropertyConfig.jsのソースコードでは、プレフィックスがdata-またはaria-の属性がカスタム属性と判断されることがわかる.

isCustomAttribute: RegExp.prototype.test.bind(
  new RegExp('^(data|aria)-[' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$')
),

--EOF--