1. 定义state
miniHeader: false
2. 定义事件
switchHeader() {
this.setState({
miniHeader: !this.state.miniHeader
})
}
3. 触发事件
onClick={this.switchHeader.bind(this)}
4. 样式切换
const styleComponentHeader = {
header: {
paddingTop: ( this.state.miniHeader ) ? '5px': '15px',
paddingBottom: ( this.state.miniHeader ) ? '5px': '15px'
}
}
完整代码
export default class ComponentHeader extends React.Component {
constructor() {
super()
this.state = {
miniHeader: false
}
}
switchHeader() {
this.setState({
miniHeader: !this.state.miniHeader
})
}
render() {
const styleComponentHeader = {
header: {
backgroundColor: '#aaa',
paddingTop: ( this.state.miniHeader ) ? '5px': '15px',
paddingBottom: ( this.state.miniHeader ) ? '5px': '15px'
}
}
return ( // 只能有一个节点
<header style={styleComponentHeader.header} onClick={this.switchHeader.bind(this)}>
<h1>头部</h1>
</header>
)
}
}