style = {{ /* Your Atrribute*/ }}
export class TodoItem extends Component {
render() {
return (
<div style={{backgroundColor:'#f4f4f4'}}>
<p>{this.props.todo.title}</p>
</div>
)
}
}
style = {itemStyle} Const itemStyle = {}
xport class TodoItem extends Component {
render() {
return (
<div style={itemStyle}>
<p>{this.props.todo.title}</p>
</div>
)
}
}
const itemStyle = {
backgroundColor:'#f4f4f4'
}
放入method(可随元素本身改变)
export class TodoItem extends Component {
getStyle = ()=>{
return{
background:'#f4f4f4',
padding:'10px',
borderBottom:'1px #ccc dotted',
textDecoration:this.props.todo.completed ?
'line-through': 'none'
}
}
render() {
return (
<div style={this.getStyle()}>
<p>{this.props.todo.title}</p>
</div>
)
}
}