点击不同的li来切换Content的内容，请怎么才能实现，我这么写无法变化为什么？

Question

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

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

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

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

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


    handleClickedLi (name, index) {
        const _self = this;
        console.log('点击li == '+ index)

        _self.setState({
            current: index
        })
    }

    renderLi (name, index) {
        return (
            <li key={name} onClick={this.handleClickedLi.bind(this, name, index)} className={'on_locking_ul_li'}> {name} </li> )
    }

    render(){

        let contentBody = this.state.current && this.state.content.length != 0 &&
            this.state.content.map((value,index)=> {
                //console.log(value," ==", index);
                return (
                    this.state.current === 0 ? <div>0</div> :
                        this.state.current === 1 ? <div>1</div> :
                            this.state.current === 2 ? <div>2</div> :
                                this.state.current === 3 ? <div>3</div> : <div>5</div>
                )
            })

        return (
            <div className={"result_tab"}>
                <ul id="tab" >
                    //通过props的形式传递数据和方法给子组件
                    //::this es7的语法详见https://github.com/tc39/proposal-bind-operator
                    { this.state.list.map( (val,index ) => {
                        //console.log(val," ==", index);
                        return this.renderLi(val, index)
                    }) }
                </ul>
                <div id="content">
                    {
                        contentBody
                    }
                </div>
            </div>
        )
    }
}


class List extends React.Component {

    handleClick(){
        //调用父组件的方法 将逻辑处理交给父组件
        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;

Answer 1

为什么要写那么复杂?

import React, { Component } from 'react'
import './styles.css'

class App extends Component {
  constructor() {
    super()
    this.state = {
      list: ['A', 'B', 'C', 'D'],
      current: 0,

      content: [
        ['img a-1', 'img a-2', 'img a-3'],
        ['img b-1', 'img b-2', 'img b-3'],
        ['img c-1', 'img c-2', 'img c-3'],
        ['img d-1', 'img d-2', 'img d-3']
      ]
    }
  }

  handleClick = index => this.setState({ current: index })

  render() {
    return (
      <div className="tab-panel">
        <ul className="tabs">
          {this.state.list.map((v, i) => (
            <li
              key={v}
              className={i === this.state.current ? 'active' : ''}
              onClick={() => this.handleClick(i)}
            >
              {v}
            </li>
          ))}
        </ul>

        <ul className="content-container">
          {this.state.content.map(
            (v, i) =>
              v.length && (
                <li key={i} className={i === this.state.current ? 'show' : 'hidden'}>
                  {v.map((img, index) => <img key={index} src={img} alt={img} />)}
                </li>
              )
          )}
        </ul>
      </div>
    )
  }
}

export default App