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切換問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！