react實(shí)現(xiàn)標(biāo)簽切換，點(diǎn)擊標(biāo)簽時(shí)候無效，錯(cuò)誤如圖所示

import React from 'react';
import './styles/index.less'

class Tab extends React.Component {
    constructor(){
        super()
        this.state = {
            list:['色情','暴力','政治','文化'],
            content:[
                {item:'http://192.168.1.247/data/chenjianyi/kuaishou300k/kuaishou_images/6307318905_0.jpg'},
                {item:'內(nèi)容二'},
                {item:'內(nèi)容三'},
                {item:'內(nèi)容四'}
            ],
            current:0
        }
    }

    handleClick(index){
        this.setState({ current:index });
    }

    currentClass(index){
        return this.state.current === index ? 'current' : '';
    }

    contentClass(index){
        return this.state.current === index ? 'active' : '';
    }

    render(){
        return(
            <div className={"result_tab"}>
                <ul id="tab" >
                    //通過props的形式傳遞數(shù)據(jù)和方法給子組件
                    //::this es7的語法詳見https://github.com/tc39/proposal-bind-operator
                    { this.state.list.map( (val,index ) => {
                        console.log(val," ==", index);
                        return ( <List currentClass={::this.currentClass} handleClick={::this.handleClick} val={val} key={index} index={index} /> )
                    }) }


                </ul>
                <div id="content" >
                    { this.state.content.map( ( val,index ) => {
                        return ( <Content key={index} val={val.item} index={index}  contentClass={::this.contentClass } /> )
                    })}
                </div>
            </div>
        )
    }
}


class List extends React.Component {

    handleClick(){
        //調(diào)用父組件的方法 將邏輯處理交給父組件
        this.props.handleClick(this.props.index);
    }
    render(){
        return(
            <li className={this.props.currentClass(this.props.index)} onClick={this.handleClick} >{this.props.val}</li>
        )
    }
}

class Content extends React.Component {

    render(){
        return(
            <div className={this.props.contentClass(this.props.index)} >{ this.props.val  }</div>
        )
    }
}

export default Tab;