react使用动态添加类名className和样式

最新推荐文章于 2023-05-11 11:43:19 发布

ze1024

最新推荐文章于 2023-05-11 11:43:19 发布

阅读量1.6w

点赞数 4

分类专栏： css react className

本文链接：https://blog.csdn.net/ze1024/article/details/108024927

版权

react 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

className

1 篇文章 0 订阅

订阅专栏

本文详细介绍了在React中如何使用多种方式为元素添加多个类名，包括字符串拼接、模板字符串、classnames插件及动态添加类名的技巧。同时，文章还解释了在导入LESS样式时的注意事项及动态类名的应用场景。

摘要由CSDN通过智能技术生成

一般我们实现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