我们可以将某些样式的修改条件写在style行类样式上。
比如我们点击一段文本的时候,让其背景的高度进行变化
import React, { Component } from 'react';
class Header extends Component {
constructor() {
super()
this.state = {
defaultHeight: true
}
}
changeHeight () {
this.setState({
defaultHeight: !this.state.defaultHeight
})
}
render() {
let styleObj ={
background: '#ccc',
height: this.state.defaultHeight ? '50px' : '100px'
}
return (
<div>
<p style={styleObj} onClick={this.changeHeight.bind(this)}>asdasd</p>
</div>
)
}
}
比如此处的文本默认高度先给它50px,点击一下它变成100px,再点击变回50px,有一个toggle来回切换的效果
我们可以在定义行类样式的时候,用一个三元运算表达式。
当其中的一个状态变化的时候,取不同的高度值
defaultHeight在constructor()里面需要先定义一下
在点击p标签的时候,对defaultHeight进行取反
注意,下面有个坑
比如定义成false,是这么定义
this.setState({
defaultHeight: false
})
取反不能这么写
this.setState({
defaultHeight: !defaultHeight
})
会报错
'defaultHeight' is not defined
下面是正确的写法
this.setState({
defaultHeight: !this.state.defaultHeight
})
事件触发state的更改,进而导致样式的更改是以上小例子的思想