后续待完善

import React from 'react';
import PropTypes from 'prop-types';

class Tab extends React.Component{

    static defaultProps ={
        
        defultCurrent:'0'
        
    }

    static propTypes = {

        defultCurrent : PropTypes.string.isRequired

    }

    constructor(props){

        super(props);

        this.state={

            currentIndex:this.props.defultCurrent

        }
    }

    select= select => this.setState({ currentIndex:select })

    render(){
        const {currentIndex} = this.state;
        return(
            <div>
                <span>你选择的是{currentIndex}</span>
                {
                    React.Children.map(this.props.children,(ele,index)=>
                        <div onClick={this.select.bind(this,index)}>{ele.props.name}</div>)
                }
                <div>
                    {
                        React.Children.map(this.props.children,(ele,index)=>currentIndex==index&&ele)
                    }
                </div>

            </div>

        )
    }
}

class App extends React.Component{


    render(){
        return(
            <div>
                <Tab defultCurrent='0'>

                    <div name='0'>
                        <div><span>我是第一个</span><span>1</span></div>
                    </div>
                    <div name="1">
                        <div><span>我是第二个</span><span>2</span></div>
                    </div>
                    <div name="2">
                        <div><span>我是第三个</span><span>3</span></div>
                    </div>

                </Tab>
            </div>

        )
    }
}


module.exports = App