【React】一个坑，React只会渲染标准属性-优快云博客

本文链接：https://blog.youkuaiyun.com/github_39570717/article/details/84063783

本文探讨了在React中使用自定义属性的限制与规范。详细分析了为什么React不会渲染未加前缀data-或aria-的自定义属性，并通过源码解读了这一行为背后的原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

ele_src="price_f"

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

从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 + ']*$')
),