React 手写 Tab栏

React 手写 Tab栏

废话不多说，直接上代码

//index.js
import React, { Component } from 'react'
import './index.less'

class Tab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabList: [
                {
                    tabName: 'Tab1',
                    id: 1
                },
                {
                    tabName: 'Tab2',
                    id: 2
                },
                {
                    tabName: 'Tab3',
                    id: 3
                },
            ],
            currentTab: 0
        }
    }

    tabClickHandle = (i) => {
        this.setState({
            currentTab: i
        })
    }

    render() {
        const { tabList, currentTab } = this.state;
        return (
            //1.给每个tab标题添加一个点击事件，
            //2.在state中，存一个默认tab下标
            //3.在点击事件中，将下标传递过去，并且更新state中的下标
            //4.tabContent部分，有几个tab 放几个坑，通过当前下标去判断显示哪一个
            <div className='tabPage'>
                {
                    <div className='tabWrapper'>
                        <ul className='clearfix'>
                            {
                                tabList.map((item, index) => {
                                    return <li className={currentTab === index ? 'avtive' : ''} onClick={() => { this.tabClickHandle(index) }}>
                                        {item.tabName}
                                    </li>
                                })
                            }
                        </ul>
                        <div className={`tabContent ${currentTab === 0 ? 'show' : 'hide'}`}>1</div>
                        <div className={`tabContent ${currentTab === 1 ? 'show' : 'hide'}`}>2</div>
                        <div className={`tabContent ${currentTab === 2 ? 'show' : 'hide'}`}>3</div>
                    </div>
                }
            </div>
        )
    }
}

export default Tab

//index.less
.clearfix:after {
  content: "";
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}

.clearfix {
  zoom: 1;
}

ul {
  padding: 0;
  margin: 0;
  li {
    list-style: none;
    float: left;
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: aqua;
  }
}

.tabPage {
  .tabWrapper {
    margin: 100px 0 0 500px;
    ul {
      li {
        cursor: pointer;
      }
    }
  }
}

.show {
  display: block;
}
.hide {
  display: none;
}

.avtive {
  background-color: yellow;
}

React学习ing