react 封装tab组件

import React, { Component } from 'react'

export default class index extends Component {

    constructor(props){
        super(props)
        this.state = {
            currentIndex:0
        }
    }

    check_title_index( index ){
        return index === this.state.currentIndex ? "tab_title active" : "tab_title"
    }




    render() {
        return (
            <>
                <ul className="wraper">
                    {
                        React.Children.map(this.props.children, (element, index) => {
                            return (
                                <li onClick={()=>{
                                    this.setState({
                                        currentIndex:index
                                    })
                                }} className={index === this.state.currentIndex?"active":''}>{element.props.name}</li>
                            )
                        })
                    }
                </ul>
                <div>
                    {
                        React.Children.map(this.props.children, (element, index) => {
                            return (
                                <div className={index === this.state.currentIndex?"showItem":'hideItem'}>{element.props.children}</div>
                            )
                        })
                    }
                </div>
            </>
        )
    }
}