怎么用react写tab切换

怎么用react写tab切换

实现思路:

1、创建一个TabChange组件,定义组件的状态;

2、写一个changeTabe函数用于改变组件状态;

3、在RenderTabs函数中绘制页面及绑定事件;

4、当组件点击时触发changeTabs即可实现切换。

效果:

代码如下:

import React,{Component} from 'react';
import ReactDom from 'react-dom'
import Header from '../../compent/header'
// import Container from  '../container'
import '../../css/tabchange.css'
function RenderTabs(tabs,tab,changeTabs){
  return tabs.map((item, idx) => {
    if(!item.isshow){
      return null;
    }
    return(
        <li 
        key={item.index} 
        className ={ tab === idx ? 'active' :'' }  
        onClick={()=>{changeTabs(idx)}}>
        {item.name}{idx}
        </li>
    )
  })
}
function showMain(idx){
  switch (idx) {
    case 0:
      return <div>我是tab {idx}</div>
      break;
    case 1:
      return <div>我是tab {idx}</div>
      break;
    case 2:
      return <div>我是tab {idx}</div>
      break;
    default:
      break;
  }
}
class TabChange extends Component{
  constructor(props){
    super(props)
    const tabs =[
      {name:'tab',index:0,isshow:true},
      {name:'tab',index:1,isshow:true},
      {name:'tab',index:2,isshow:true}
    ]
    this.state={
      tab:0,
      tabs
    }
  }
  changeTabe=(idx)=>{
    console.log(idx);
    this.setState({
      tab:idx
    });
  }
 
  render(){
    const {tabs,tab} =this.state;
    return(
      <div className="tabchange-box">
        <Header title={'Tabchange'} haveNav={true}/>
        <ul>
          {RenderTabs(tabs,tab,this.changeTabe)}
        </ul>
        {showMain(tab)}
      </div>
    )
  }
}
export default TabChange;
//css
.tabchange-box{padding: 0px .2rem;}
.tabchange-box ul{display:flex;border-bottom: 1px solid #eee;flex-direction: row;}
.tabchange-box  ul li{text-align: center}
.tabchange-box  ul li.active{border-bottom: 2px solid rebeccapurple;color: rebeccapurple}

更多React相关技术文章,请访问React答疑栏目进行学习!

以上就是怎么用react写tab切换的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细

    excel常用函数都有哪些?

    excel常用函数都有哪些?,函数,哪些,常用,1、SUM函数:SUM函数的作用是求和。函数公式为=sum()例如:统计一个单元格区域:=sum(A1:A10)  统计多个