class 和 className 合并问题

[TLovers]

🧐 Problem Description

• 对于class和className 区别我很迷惑
• 假定有一个 Demo组件
• Demo组件使用的时候我想再给组件加一个类名叫做test2,预期渲染出来是2个类名合并的 class="test1 test2 "， 但是我发现 test2 会直接把test1 给覆盖掉
• 如果定义成Demo2那样，就会正常的合并
• 如果定义成Demo3那样，则没有发生任何变化

💻 Sample code

    
    const Demo = () => {
        return (
             <div className={style.test1}>测试一下</div>
        )
    }
   <Demo class="test2">
   
    const Demo2 = () => {
        return (
             <div class={style.test1}>测试一下</div>
        )
    }
   <Demo2 class="test2">

  const Demo3 = () => {
        return (
             <div className={style.test1}>测试一下</div>
        )
    }
   <Demo3 className="test2">

🚑 Other information

没有

[daihaoxin]

我用 tsx 的时候，试着用了一下 className ， 直接编译不通过，所以出现这个问题，应该是 vue 的 jsx 写法不支持 className, 直接使用 class 就可以，不用纠结跟 react 一样

[sxzz]

className is not used for Vue, but React. We can use class directly.

[luqiudi]

但是你在vscode vue 里面写 tsx 或者jsx 文件,直接tab,就是 className呀,还报错,