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>}
{/* {checkedTag.name === tabsList[0].name && <Module1 />}
{checkedTag.name === tabsList[1].name && <Module2 />}
{checkedTag.name === tabsList[2].name && <Module3 />}
{checkedTag.name === tabsList[3].name && <Module4 />} */}
</div>
</div>);
}
子文件
import style from './index.scss';
import React from 'react';
import { message } from 'antd';
// 标签类型
export type tagType = {
name: string, // 标签名称，唯一
disabled?: boolean // 是否禁用
}
/**
* 子页面 tab 栏
* @param props
*/
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切换问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注本站行业资讯频道！