【React】一个坑,React只会渲染标准属性

今日做埋点,如在属性上加上

ele_src="price_f"

添加然发现react的渲染结果并没有渲染出该属性,一开始考虑是否是react不能识别出下滑线,然经过实践发现并非如此。

从JSX Gotchas这篇文章谈到对于标准的HTML元素,React只会渲染标准属性(如name),自定义的属性(如daniel)会被忽略掉,除非加前缀data-或aria-(如data-daniel or aria-daniel)。

那我们从源码来瞧瞧是不是这样。

(注意:自定义组件类型的属性是不受上面规则的约束的,因为源码里面压根没处理嘛,哈)

DOMProperty.jsinjectDOMPropertyConfig代码中只是对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 + ']*$')
),

 

你可能感兴趣的:(react)