CategoryLayoutExample.tsx

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

}