React 的Tab切换

简单的几行代码 

import React, { Component } from 'react';
class View extends Component {
    constructor(props) {
        super(props)
        this.state = {
            current: 1,
        }
    }

    tabFn(index) {
        this.setState({
            current: index
        })
    }
    clsFn(index, curCls, cls) {
        //如果符合当前就多一个class
        //如果不符合就没有class
        // current===1?'cur':''
        let { current } = this.state
        return current === index ? curCls : cls
    }
    componentDidMount() {
        this.tabFn(1)
        // this.tabFn(2)
        // this.tabFn(3)
    }
    render() {
        return (
            <div>
                <h3>tab切换</h3>
                <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>
        );
    }
}
export default View;