動(dòng)態(tài)添加類(lèi)名
- 已知變量：value = { class: 'class1'亥啦，class: 'class2' ，value: '你好'}惨撇，想要得到如下結(jié)果
<div class="class1 class2">你好</div>
實(shí)現(xiàn)方式
// 常用
// （字符串寫(xiě)法）
<div className={value.class + " " + value.class2}>{value.value}</div>
// （模板字符串寫(xiě)法）
<div className={`${value.class} ${value.class2}`}>{value.value}</div>
// 其他
// （引入依賴(lài)）
import cs from 'classnames' // 引入classnames依賴(lài)庫(kù)
const addClass2 = true
<div className=cs({"class1":true,"class2":addClass2})>{value.value}</div>
// （數(shù)組類(lèi)名）
<div className={[value.class,value.class2].join(" ")}>{value.value}</div>
- 動(dòng)態(tài)判斷添加類(lèi)名
// 動(dòng)態(tài)判斷添加單類(lèi)名
<div className={index===this.state.currentState?"active":null}>hello</div>
// 已有多類(lèi)名，動(dòng)態(tài)判斷再添加類(lèi)名
// ( 數(shù)組法)
<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>
動(dòng)態(tài)添加樣式
- 某原素需要?jiǎng)討B(tài)添加一個(gè) display:block|none樣式
實(shí)現(xiàn)方式如下
<div style={{display: (index===this.state.currentState) ? "block" : "none"}}>hello</div>
// 標(biāo)簽是否隱藏 （多樣式）
<div style={{
display: (index===this.state.currentState) ? "block" : "none",
color:"red",
fontSize: 16, }}>hello</div>
