小编给大家分享一下React如何手写tab切换问题，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
父文件
import React, { useState } from 'react';// import Module1 from './Module1';// import Module2 from './Module2';// import Module3 from './Module3';// import Module4 from './Module4';import HeaderTtabs, { tagType } from '@/components/Task/Tree/Common/component/TabsContent/ListContent/HeadTabs';import { divide } from 'lodash';export default function (props: any) { const tabsList: tagType[] = [ { name: 'xxx况' }, { name: '培育xxxxx', disabled: false }, { name: '关xxxx', disabled: false }, { name: '科xxxx', disabled: false }, { name: '人xxxx', disabled: false }, ]; const [checkedTag, setCheckedTag] = useState(tabsList[0]) return (<div> <HeaderTtabs tabsList={tabsList} checkedTag={checkedTag} setCheckedMenu={(tab) => setCheckedTag(tab)} /> <div className={`pt5 px20 pb20`}> {checkedTag.name === tabsList[0].name && <div>11</div>} {checkedTag.name === tabsList[1].name && <div>22</div>} {checkedTag.name === tabsList[2].name && <div>33</div>} {checkedTag.name === tabsList[3].name && <div>44</div>} {checkedTag.name === tabsList[4].name && <div>55</div>} {} </div> </div>);}子文件
import style from './index.scss';import React from 'react';import { message } from 'antd';// 标签类型export type tagType = { name: string, // 标签名称，唯一 disabled?: boolean // 是否禁用}export default function(props: { tabsList: tagType[], // 标签列表 checkedTag: tagType, // 当前选中的标签 setCheckedMenu: (menu: tagType) => void // 标签点击回调}) { const {tabsList, checkedTag, setCheckedMenu} = props const setCheck = (menu: tagType) => { if (menu.disabled) { message.warning('功能暂未开放'); return } setCheckedMenu(menu) } return (<div className={`${style.tag_area} ${style.epidemic_area}`}> { tabsList.map((item) => ( <div className={`${style.tag} ${checkedTag.name === item.name ? style.checked : ''} ${style.epidemic}`} key={item.name} onClick={() => setCheck(item)}> {item.name} </div> )) } </div>)}子文件-tab样式：
.tag_area { display: flex; align-items: center; justify-content: center; margin-top: -20px; background-color: #fff; margin-bottom: 20px; @media only screen and (max-width: 768px) { & { margin-top: 10px; } }}.tag { // flex: 1; // margin: 0 15px; min-width: 130px; padding: 10px; display: flex; align-items: center; justify-content: center; background-color: #fff; height: 50px; color: #333; cursor: pointer; transition: .3s all; // box-shadow: 5px 3px 4px #999; font-size: 18px; // border-radius: 10px; border-radius: 6px 6px 0px 0px; @media only screen and (max-width: 768px) { & { font-size: 14px; margin: 0 5px; min-height: 30px; text-align: center; padding: 5px; } } &.checked { color: #fff; background-color: #1E9FFF; } &:hover { color: #fff; background-color: #1E9FFF; }}// 浙里防疫 四个tab样式.epidemic_area{ justify-content: left; margin: 10px 20px; padding:10px;}.epidemic{ margin:0 10px; width: 200px; background: rgba(20, 146, 255, 0.1); border: 1px solid #1492FF; box-sizing: border-box; border-radius: 4px; height: 44px;}以上是“React如何手写tab切换问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
