React动态添加类名className和样式style

最新推荐文章于 2025-11-20 14:18:06 发布

原创最新推荐文章于 2025-11-20 14:18:06 发布 · 2.4w 阅读

22 ·

CC 4.0 BY-SA版权

React 同时被 2 个专栏收录

8 篇文章

订阅专栏

ES6

1 篇文章

订阅专栏

本文详细介绍如何在React中动态添加类名和样式，包括使用字符串拼接、模板字符串、classnames库及数组方法等技巧，适用于不同场景的需求。

一、React动态添加类名

已知变量：value = { class: 'class1', class2: 'class2', value: '你好' }，想得到结果如下：

<div class="class1 class2">你好</div>

实现方式如下：

// React实现  双类名/多类名

// 常用
// （字符串写法）
<div className={value.class + " " + value.class2}>{value.value}</div>
// （模板字符串写法）
<div className={`${value.class} ${value.class2}`}>{value.value}</div>

// 其他
// （引入依赖）
import cs from 'classnames' // 引入classnames依赖库
const addClass2 = true

<div className=cs({"class1":true,"class2":addClass2})>{value.value}</div>
// （数组类名）
<div className={[value.class,value.class2].join(" ")}>{value.value}</div>

2.动态判断添加类名

// 动态判断添加单类名
<div className={index===this.state.currentState?"active":null}>hello</div>

// 已有多类名，动态判断再添加类名
// ( 数组法)
<div className{[classA,'box',index===this.state.currentState?"active":null].join('')}>hello</div>
// （模板字符串法）
<div className={`box${classA}${index===this.state.currentState?"active":null}`}>hello</div>

二、React动态添加样式

1.某元素需要动态添加一个 display:block | none 样式

实现方式如下：

// 标签是否隐藏 （单样式）
<div style={{display: (index===this.state.currentState) ? "block" : "none"}}>hello</div>

// 标签是否隐藏 （多样式）
<div style={{
        display: (index===this.state.currentState) ? "block" : "none",
        color:"red",
        fontSize: 16,  }}>hello</div>