react使用动态添加类名className和样式
一般我们实现css 的时候 会给一个class添加多个样式 比如<div class="class1 class2">HELLO WORLD</div>但是如果你在jsx文件里,通过import的形式引入的less,那么就不能这么写了,那么这时候想实现上面的效果怎么办,如下React实现双类名/多类名方法一// React实现双类名/多类名import styles fro
·
一般我们实现css 的时候 会给一个class添加多个样式 比如
<div class="class1 class2">HELLO WORLD</div>
但是如果你在jsx文件里,通过import的形式引入的less,那么就不能这么写了,那么这时候想实现上面的效果怎么办,如下
React实现 双类名/多类名
方法一
// React实现 双类名/多类名
import styles from './styles.less';
// 常用
// (字符串写法)
<div className={styles.class + " " + styles.class2}>我是div1</div>
方法二
// (模板字符串写法)
import styles from './styles.less';
<div className={`${styles.class} ${styles.class2}`}>我是div2</div>
方法三
//安装插件
npm install classnames --save //先安装插件
// (引入依赖)
import classnames from ‘classnames’; //引入依赖
<Button className={classnames({
//这里可以根据各属性动态添加,如果属性值为true则为其添加该类名,如果值为false,则不添加。这样达到了动态添加class的目的
base: true,
inProgress: this.props.store.submissionInProgress,
error: this.props.store.errorOccurred,
disabled: this.props.form.valid,
})}>
<Button/>
// 或者下面的方法(看下面的)
const addClass1 = true
<div className=classnames({"class1":true,"class2":addClass1})>{value.value}</div>
// (数组类名)
<div className={[styles.class,styles.class2].join(" ")}>{value.value}</div>
React实现 双类名/多类名(二)
如果对上面的方法都不满意,可以改变引入css的方式,比如
import './styles.less'
<div className="class1 class2">HELLO WORLD</div>
//这样写后在css样式里面就不能和以前一样的写法,就得用:global() 把类名包裹起来
:global(.class){
width: 100px;
height: 100px;
background:#f00;
}
动态添加类名,样式
主要就是用三目运算法来判断来添加样式
// 动态判断添加单类名
<div className={detail.applyStatus == 1 ? styles.class : styles.class2 }>HELLO WORLD</div>
// 已有多类名,动态判断再添加类名
// ( 数组法)
<div className{[classA,'box',index===this.state.currentState?"active":null].join('')}>HELLO WORLD</div>
// (模板字符串法)
<div className={`box${classA}${index===this.state.currentState?"active":null}`}>HELLO WORLD</div>
https://blog.csdn.net/keep789/article/details/89501066?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
更多推荐
所有评论(0)