react动态添加和设置样式：style和className

原文链接: https://dsx2016.com/?p=467

➢ react动态设置样式

所谓动态,有两种方式:

• 在react生命周期中获取数据并使用js来改变某些属性和样式

• 监听state,props等某些动态变量,使用条件判断或者赋值来改变

➢ style动态设置

例如: 改变一个div的显隐

通过设置div的display:blick|none来控制显示和隐藏

注意style的{{ }}

<div style={{display: this.state.isShow ? "block" : "none"}}>
    demo
</div>

注意多个样式的写法:

样式和样式之间用,隔开

<div style={{display: this.state.isShow ? "block" : "none", color:"pink"}}>
    demo
</div>

例如: 动态设置div的宽高

<div style={{width: this.state.screenWidth }}>
    demo
</div>

➢ className动态设置

单个className

<div className={this.state.isActive?"active":"default"}>
    demo
</div>

多个className

推荐写法: ES6

如果为null,则class,第一个className,第二个className为空

<div className={`content ${this.state.isActive?"active":null}`}>
    demo
</div>

其他写法: 数组转化

<div className={["container", this.state.isActive?"active":null].join(' ')}>
    demo
</div>