typescript实现选项卡

js部分

interface Props {
    index: Number
    curCls: string
    cls: string
}
interface State {
    current: Number
}

class Home extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            current: 1
        }
    }
    tabFn(index: number) {
        this.setState({
            current: index
        })
    }
    clsFn(index: number, curCls: string, cls: string) {
        let { current } = this.state;
        // console.log(current)
        return current === index ? curCls : cls;
        // return current === index ? 'cur2' : '';
    }
    componentDidMount() {
        this.tabFn(1)
    }
    render() {
        let current = this.state.current;
        console.log(current)
        return (
            <div>

                <div className='tab_con3'>
                    <ol>
                        <li onClick={() => { this.tabFn(1) }} className={this.clsFn(1, 'cur3', '')}>标题一</li>
                        <li onClick={() => { this.tabFn(2) }} className={this.clsFn(2, 'cur3', '')}>标题二</li>
                        <li onClick={() => { this.tabFn(3) }} className={this.clsFn(3, 'cur3', '')}>标题三</li>
                    </ol>

                    <ul>
                        <li className={this.clsFn(1, 'current', '')}>内容一</li>
                        <li className={this.clsFn(2, 'current', '')}>内容二</li>
                        <li className={this.clsFn(3, 'current', '')}>内容三</li>
                    </ul>
                </div>
            </div>
        );
    }
}

css部分

.tab_con3{
    width: 500px;
    margin: 0 auto;
    ol{
        height: 40px;
        overflow: hidden;
        margin-bottom: 10px;
        li{
            float: left;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background: #ccc;
            width: 60px;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
            margin-right: 20px;
            &.cur3{
                background: aqua;
            }
            
        }
    }
    ul{
        li{
            border-radius: 10%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            width: 240px;
            border: 1px solid skyblue;
            display: none;
            &.current{
                display: block;
            }
        }
    }
}