內聯式樣中的表達式

內聯式樣中的表達式

import React from 'react';
export default class CompomentHeader extends React.Component{

constructor(){
super();
this.state ={
miniHeader:false //默認加載的時候仍是高（不是mini）的頭部
};
};

switchHeader(){
this.setState({
miniHeader: !this.state.miniHeader //對state進行取反
});
};

render(){
const styleComponentHeader = {
header: {
backgroundColor: "#333333",
color: "#ffffff",
"padding-top": (this.state.miniHeader) ? "3px" : "15px",
paddingBottom: (this.state.miniHeader) ? "3px" : "15px"
},
//還能夠定義其餘的樣式
};
return(
header style={styleComponentHeader.header} className="smallFintSize" onClick={this.switchHeader.bind(this)}>
h1>這裏是表頭</h1
</header
)
}
}