react实现简单选项卡功能

上代码

html：

<div id="root"></div>

css：

body {
      margin: 0;
    }

    ul {
      display: flex;
      justify-content: space-around;
      width: 500px;
      padding: 0;
    }

    li {
      list-style: none;
      height: 30px;
      line-height: 30px;
      text-align: center;
      width: calc(100% / 3);
      background: #ccc;
      color: aquamarine;
    }

    li.active {
      background: indianred;
      color: antiquewhite;
    }
    .tags>div{
      width: 500px;
      height: 480px;
      border: 2px dotted #ccc;
      display: none;
    }
    .tags>div.active{
      display: block;
    }

JavaScript：

    class Tab extends React.Component {
      state = {
        tagTitles :[{ id: 't1', title: '首页' }, { id: 't2', title: '新闻' }, { id: 't3', title: '军事' }],
        tagContents :[{ id: 'c1', content: '首页内容' }, { id: 'c2', content: '新闻页面' }, { id: 'c3', content: '军事页面' }],
        current: 0
      }

      changeCurrent(index) {
        this.setState({
          current:index
        })
      }
      render() {
        let titles = this.state.tagTitles;
        let contents = this.state.tagContents;
        let current = this.state.current;



        return (
          <div className="tags">
            <ul>
              {
                titles.map((item, index) => <li className={current === index ? "active" : ""} onClick={this.changeCurrent.bind(this,index)} key={item.id}>{item.title}</li>)
              }
            </ul>
            {
              contents.map((item, index) => <div className={current === index ? "active" : ''} key={item.id}>{item.content}</div>)
            }
          </div>
        )
      }

    }
    ReactDOM.render(<Tab />, document.querySelector('#root'))