Problem beim Wechseln der Registerkarten für die Handschrift von React

importiere React, { useState } von 'react';
//Modul1 aus „./Module1“ importieren;
//Modul2 aus „./Module2“ importieren;
//Modul3 aus „./Module3“ importieren;
// importiere Modul4 aus „./Module4“;
importiere HeaderTtabs, { tagType } aus '@/components/Task/Tree/Common/component/TabsContent/ListContent/HeadTabs';
importiere { teile } von 'lodash';

Standardfunktion exportieren (Eigenschaften: beliebig) {

  const tabsList: tagType[] = [
    { Name: 'xxx Situation' },
    { Name: 'Cultivate xxxxx', deaktiviert: false },
    { Name: 'Schließen xxxx', deaktiviert: false },
    { Name: '科xxxx', deaktiviert: false },
    { Name: '人xxxx', deaktiviert: false },
  ];
  const [checkedTag, setCheckedTag] = useState(tabsList[0])
  zurück (<div>
    <HeaderTtabs tabsList={tabsList} checkedTag={checkedTag} setCheckedMenu={(tab) => setCheckedTag(tab)} />
    <div Klassenname = {`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>);
}

Stil aus „./index.scss“ importieren;
importiere React von „react“;
importiere {Nachricht} von „antd“;

// Tag-Typ Exporttyp tagType = {
  Name: Zeichenfolge, // Tag-Name, eindeutig deaktiviert?: Boolesch // ob deaktiviert werden soll }

/**
 * Registerkartenleiste der Unterseite * @param-Eigenschaften
 */
Standardfunktion exportieren (Eigenschaften: {
  tabsList: tagType[], // Tag-Liste checkedTag: tagType, // aktuell ausgewähltes Tag setCheckedMenu: (menu: tagType) => void // Tag-Klick-Callback }) {
  const {tabsList, checkedTag, setCheckedMenu} = Eigenschaften
  const setCheck = (Menü: Tagtyp) => {
    wenn (Menü.deaktiviert) {
      message.warning('Funktion noch nicht verfügbar');
      zurückkehren
    }
    setCheckedMenu(Menü)
  }
  zurück (<div className={`${style.tag_area} ${style.epidemic_area}`}>
    {
      tabsList.map((Element) => (
        <div className={`${style.tag} ${checkedTag.name === item.name ? style.checked : ''} ${style.epidemic}`} key={item.name} onClick={() => setCheck(item)}>
          {item.name}
        </div>
      ))
    }
  </div>)
}

.tag_area {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Rand oben: -20px;
  Hintergrundfarbe: #fff;
  Rand unten: 20px;
  @media only screen und (max-width: 768px) {
    & {
      Rand oben: 10px;
    }
  }
}

.Etikett {
  // flexibel: 1;
  //Rand: 0 15px;
  Mindestbreite: 130px;
  Polsterung: 10px;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Hintergrundfarbe: #fff;
  Höhe: 50px;
  Farbe: #333;
  Cursor: Zeiger;
  Übergang: .3s alles;
  // Kastenschatten: 5px 3px 4px #999;
  Schriftgröße: 18px;
  // Rahmenradius: 10px;
  Rahmenradius: 6px 6px 0px 0px;
  @media only screen und (max-width: 768px) {
    & {
      Schriftgröße: 14px;
      Rand: 0,5px;
      Mindesthöhe: 30px;
      Textausrichtung: zentriert;
      Polsterung: 5px;
    }
  }

  &.geprüft {
    Farbe: #fff;
    Hintergrundfarbe: #1E9FFF;
  }
  &:schweben {
    Farbe: #fff;
    Hintergrundfarbe: #1E9FFF;
  }
}


// Vier Registerkartenstile für die Epidemieprävention in Zhejiang.epidemic_area{
  Inhalt ausrichten: links;
  Rand: 10px 20px;
  Polsterung: 10px;
}

.Epidemie{
  Rand: 0 10px;
  Breite: 200px;
  Hintergrund: rgba (20, 146, 255, 0,1);
  Rand: 1px durchgezogen #1492FF;
  Box-Größe: Rahmenbox;
  Rahmenradius: 4px;
  Höhe: 44px;
}