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;
}