React 样式：内联样式表达式

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>    )  }}