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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值