React 动态属性Style和动态类名className

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>

怎么通过表达式来动态添加类名呢？

已知变量：value = { class: ‘class1’, class2: ‘class2’, isShow : fasle }，想得到结果如下：

// 当	 isShow = false 类名为 class1
<div class="class1">你好</div>

// 当	 isShow = true 类名为 class2
<div class="class2">你好</div>

实现方式如下：

<div className={这里面就可以写表达式} >你好</div>

// 动态判断添加单类名
// 这里三元的意思 如果isShow = true 类名就为class2   否则就是class1
<div className={value.isShow?value.class2:value.class1} >你好</div>

已有多类名，动态判断再添加类名

数组法

 原先已经有的类名 有  box 和 value.class2 后来需要条件判断的值是value.isShow 
 如果为true 添加类名 active
 如果为false就没有类名添加
 
 获取到的结果就应该是[value.class2,'box',"active"].join(' ')
  
 转换到的结果className = {value.class2 'box' "active"}
 
 <div className={[value.class2,'box',value.isShow?"active":''].join('')}>hello</div>

---

模板字符串法

这里就相当于写了一个字符串拼接上去，写法更通俗易懂
className="box classA active"
<div className={`box${classA}${value.isShow?"active":''}`}>hello</div>

---

React动态添加样式

比如我这个盒子动态添加一个 display:block | none 样式

// state 数据
	state={isShow:false}

isShow=true就显示
isShow=false就隐藏

// 模板字符串写法
<div style={{display:`${this.state.isShow?'block':'none'}`}}>hello</div>

// 表达式写法
<div style={{display:(this.state.isShow)?'block':'none'}}>hello</div>

如果我有多个样式呢？

// 模板字符串写法
<div style={{display:`${this.state.isShow?'block':'none'}`,background:'blue'}}>hello</div>

// 表达式写法
<div style={{display:(this.state.isShow)?'block':'none', color:"red"}}>hello</div>