React 实现简单的选项卡(标签页)切换效果【日常记录, 可供参考】

^Being^

已于 2023-07-16 11:07:44 修改

阅读量1.4k

点赞数

分类专栏： web前端 React 文章标签： react.js javascript 前端 typescript

于 2022-12-12 22:59:01 首次发布

本文链接：https://blog.csdn.net/weixin_43802738/article/details/128294237

版权

web前端同时被 2 个专栏收录

18 篇文章

订阅专栏

React

1 篇文章

订阅专栏

前言

1、通常来说，为了满足公司项目开发进度，我们都会选择使用第三方UI库进行开发，基本上都是可以解决的，但也存在第三方库无法满足的情况，比如说有的样式和公司设计师设计的样式相差甚远，且不巧的是第三方库的自定义UI样式修改又比较繁琐，那么就需要我们自己处理了，自己造轮子还是很有必要滴。
2、此文章为使用 React 对选项卡(标签页)的基础实现 的日常记录，取其中一种较为简易的写法留存，可供参考，欢迎指正

Coding

下面为基本逻辑处理

import React, { FC, useState } from 'react'
import Child1 from './component/child1';
import Child2 from './component/child2';
import './index.scss'

const Tabs: FC = () => {
  const [curTab, setCurTab] = useState<number>(0)
  const tabList = [
    {
      key: 0,
      label: '选项1',
      element: <Child1 />
    },
    {
      key: 1,
      label: '选项2',
      element: <Child2 />
    },
  ]
  // 切换tab页
  const handleSwitchTab = (tabKey: number) => () => {
    setCurTab(tabKey)
  }
  return <div>
    <div className="tabWrapper">
      {
        tabList.map(item => {
          return <div className={`tabItem ${curTab === item.key ? 'activeTab' : ''}`} onClick={handleSwitchTab(item.key)} key={item.key}>{item.label}</div>
        })
      }
    </div>
    <div className="tabContainer">
      {
        tabList[curTab].element
      }
    </div>
  </div>
}

export default Tabs

下面是基础样式代码, 使用scss书写

.tabWrapper {
  display: flex;
  width: 150px;
  height: 32px;
  justify-content: space-around;
  align-items: center;
  margin: 28px 0 20px 0;
  padding: 2px;
  box-sizing: border-box;
  background: rgba(37, 40, 50, 0.1);
  border-radius: 4px;
  .tabItem {
    padding: 2px 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    border-radius: 4px;
    color: #252832;
    cursor: pointer;
    user-select: none;
    transition: .2s;
    &.activeTab {
      color: #1364E8;
      background: #fff;
    }
  }
}