一、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>