vue中书写JSX一些坑-特殊属性名

最新推荐文章于 2025-05-27 19:30:00 发布

weixin_33733810

最新推荐文章于 2025-05-27 19:30:00 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiangnan/p/10925091.html

博客以T1和T2引用Sub为例，说明key2会出现在props及data.attrs中，key在data里。还提出思考，即哪些属性名是特殊的，以及若想把里面变量名用于其他用途该怎么办，同时给出了相关参考链接。

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

举例说明, T1和T2引用Sub时, key2会出现在props以及data.attrs中, 而key则在data中

const Sub = ({data, props}) => {
  console.log(data,  props)
  return <h1>hello</h1>
}
const T1 = () => {
  return <Sub key="foo"/>
}
const T2 = () => {
  return <Sub key2="foo"/>
}
const T3 = () => {
  return <Sub propsKey2="foo"/>
}

因为key是特殊属性, 那么哪些属性名是特殊的呢? 直接看源码

const rootAttributes = ['staticClass', 'class', 'style', 'key', 'ref', 'refInFor', 'slot', 'scopedSlots', 'model']
const prefixes = ['props', 'domProps', 'on', 'nativeOn', 'hook', 'attrs']

那么如果我硬是想把rootAttributes里面的变量名用于props, 该怎么办呢? 经测试: