React简易版实现tab切换功能

后续待完善

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(
            

                你选择的是{currentIndex}
                {
                    React.Children.map(this.props.children,(ele,index)=>
                        
{ele.props.name}
)
                }
                

                    {
                        React.Children.map(this.props.children,(ele,index)=>currentIndex==index&&ele)
                    }
                

            

        )
    }
}

class App extends React.Component{


    render(){
        return(
            

                

                    

                        
我是第一个1
                    
                    

                        
我是第二个2
                    
                    

                        
我是第三个3
                    

                
            

        )
    }
}


module.exports = App