React如何手写tab切换问题

小编给大家分享一下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切换问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！