Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from 'react'
export class CategoryLayout extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = {
selectedItem: 'con1layout1'
}
}
render() {
return (
<div>
<Category cateIndex={ 1 }
selectedItemName={ this.state.selectedItem }
onClick={ itemName => {
this.setState({ selectedItem: itemName })
} }/>
<Category cateIndex={ 2 }
selectedItemName={ this.state.selectedItem }
onClick={ itemName => {
this.setState({ selectedItem: itemName })
} }/>
<Category cateIndex={ 3 }
selectedItemName={ this.state.selectedItem }
onClick={ itemName => {
this.setState({ selectedItem: itemName })
} }/>
</div>
)
}
}
class Category extends React.Component<any, any> {
highlightStyle
constructor(props) {
super(props);
this.highlightStyle = { color: 'red', backgroundColor: 'yellow' }
}
render() {
return (
<div className='cate'>
<div className='cate-header'>
<div className='cate-title'>Cagetory{ this.props.cateIndex }</div>
</div>
<div className='cate-list'>
<div
style={ this.props.selectedItemName == 'con' + this.props.cateIndex + 'layout1' ? this.highlightStyle : {} }
onClick={ e => {
this.props.onClick(`con${ this.props.cateIndex }layout1`)
} }>Layout1
</div>
<div
style={ this.props.selectedItemName == 'con' + this.props.cateIndex + 'layout2' ? this.highlightStyle : {} }
onClick={ e => {
this.props.onClick(`con${ this.props.cateIndex }layout2`)
} }>Layout2
</div>
<div
style={ this.props.selectedItemName == 'con' + this.props.cateIndex + 'layout3' ? this.highlightStyle : {} }
onClick={ e => {
this.props.onClick(`con${ this.props.cateIndex }layout3`)
} }>Layout3
</div>
</div>
</div>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment