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 (setCheckedTag(tab)} />{checkedTag.name === tabsList[0].name && 11}{checkedTag.name === tabsList[1].name && 22}{checkedTag.name === tabsList[2].name && 33}{checkedTag.name === tabsList[3].name && 44}{checkedTag.name === tabsList[4].name && 55}{/* {checkedTag.name === tabsList[0].name && }{checkedTag.name === tabsList[1].name && }{checkedTag.name === tabsList[2].name && }{checkedTag.name === tabsList[3].name && } */}); }

子文件

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} = propsconst setCheck = (menu: tagType) => {if (menu.disabled) {message.warning('功能暂未开放'); return}setCheckedMenu(menu)}return ({tabsList.map((item) => (setCheck(item)}>{item.name}))})}

子文件-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切换问题】到此这篇关于React手写tab切换的文章就介绍到这了,更多相关React tab切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！