JSX那些不一致的标准属性[一源一世界][之React]

通过阅读React的关于JSX的官方文档，我们知道在JSX声明标准HTML元素(如div)的属性时，有一些比较特殊的在命名上与标准属性有点出入，例如className

var myDivElement = <div className="foo" />;

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