在react开发过程中,如何动态向元素内添加样式style或className
className动态添加
可以实现的语法如下:
1、使用逻辑运算符
<i className={value.checked && "active"} />
2、使用三元运算符
<i className={value.checked ? "active" : null} />
3、使用函数
getStyle() {
return this.value.checkedr ? 'active' : '';
}
<i className={this.getStyle()} />
4、数组语法
<i className={["check-radio", value.checked ?"active":null].join(' ')}/>
5、使用ES6写法(推荐使用ES6写法)
<i className={`check-radio ${ value.checked ?"active":null}`} />
或者使用classnames依赖库
style动态添加
1、当前标签无其他class,并且只动态添加一个className
<i style={{display: block ? 'block' : "none",color: 'red'}}/>
<i style={ block ? {display: 'block'} : { display: 'none'}}/>