react中在元素中插入多个类名, 多个状态之间的类名切换等

这个要是对vue的童鞋还是应该很简单的吧
在react的初学者中，这个还得稍微简单思考下呢
在正常的元素中。想使用多个类名那么之际在class 中书写就行了

<div class="test test1 demo2">div>

那么div 这个元素就会有 test. test1 demo2 这三个类名了

其实如果只是简单的元素 我们在react中当然也可以这样做了
不过是吧 class 换成className

<div className="test test1 demo2">div>

但是在涉及到。css模块化 或者 sass 和 less 模块化 引入的方式还是会有点不同的
比如

import styles from "./index.less"

那么我们像运用多个类名

<div className={`${styles.test} ${styles.test1} ${styles.demo2}`}></div>

得写成这样了

其实 我们经常会做的一种类名的切换 可能就是用来处理各个状态然后显示不同的颜色或者背景色这些东西
那么 就可以 通过变量值的判断 来返回不同的类名就可以 比如下面的这种处理方式

function status(type) {
	if(type === 1) return styles.demo1;
	if(type === 2) return styles.demo2;
}

在实际的运用中 直接传入 type 就可以了

<div className={status(1)}> div>

这样就事半功倍了

关注我。持续更新前端知识。