Shulou(Shulou.com)06/02 Report--

Editor to share with you how React handwritten tab switching problem, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Parent file

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 situation'}, {name: 'cultivate xxxxx', disabled: false}, {name:' close xxxx', disabled: false}, {name: 'family xxxx', disabled: false}, {name:' human 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 & &} * /}) }

Child file

Import style from'. / index.scss';import React from 'react';import {message} from' antd' / / tag type export type tagType = {name: string, / / tag name Unique disabled?: boolean / / whether to disable} / * * Sub-page tab column * @ param props * / export default function (props: {tabsList: tagType [], / / tag list checkedTag: tagType, / / currently selected tag setCheckedMenu: (menu: tagType) = > void / / tag Click callback}) {const {tabsList, checkedTag SetCheckedMenu} = props const setCheck = (menu: tagType) = > {if (menu.disabled) {message.warning ('feature not available') Return} setCheckedMenu (menu)} return ({tabsList.map ((item) = > (setCheck (item)} > {item.name}))})}

Subfile-tab style:

.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: 05px; min-height: 30px Text-align: center; padding: 5px;} & .epidemic {color: # fff; background-color: # 1E9FF;} &: hover {color: # fff; background-color: # 1E9FF;}} / / four tab styles for epidemic prevention in Zhejiang. 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;} these are all the contents of the article "how to handwrite tab switching in React". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.