引入
看公司的表单组件,发现一个data-name属性,这个在最早做react的todo时,遇到过,因为获取不到直接定义的属性,还写过一篇肤浅的博客。其实这个并不是react里面的内容,而是html5里面的
data-*用法
目前我没有参考文档,所以不知道它为什么会出现,但是我知道怎么用,在什么场景用,直接讲自己理解的用法。
获取这个属性,可以利用
1 | domNode.getAttribute('data-foo') |
这个其中一个应用场景就是你在react中获取节点后,想获取这个data-属性里面的值
还可以在事件对象的当前对象下的dataset属性中获取
1 | e.currentTarget.dataset.foo; |
这个让我想到了小程序,它内部实现也估计用了这个。
延伸题外话
html5很重要,很多东西经常用到,我们应该怎么学习html5,我的体会是从html5名字去搜书名得到的书是不行的。但是有一本书,我最近翻了翻,发现里面有很多html5的内容,那就是大家都知道的《JavaScript高级程序设计》,很厚,一天读10页,也要很久读完,推荐大家如果忙的话,把它当字典查,当然最好是读一遍。
我之前项目搜data-name没搜到,后来看了mdn以后,我说不可能搜不到,肯定是之前没搜好,果然就是我的想法,搜到了,也是上述用法用的。
REACT16以后
可以不用data-*,不带data-的属性也会渲染到原生dom节点上了
更多内容待大家一起探讨,下次见
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com