React 手書きタブ切り替え問題

React をインポートし、{useState} を 'react' から取得します。
// './Module1' から Module1 をインポートします。
// './Module2' から Module2 をインポートします。
// './Module3' から Module3 をインポートします。
// './Module4' から Module4 をインポートします。
'@/components/Task/Tree/Common/component/TabsContent/ListContent/HeadTabs' から HeaderTtabs、{ tagType } をインポートします。
'lodash' から {divide} をインポートします。

デフォルト関数をエクスポートする（プロパティ：任意）{

  const tabsList: タグタイプ[] = [
    { 名前: 'xxx 状況' },
    { 名前: 'Cultivate xxxxx'、無効: false }、
    { 名前: 'xxxx を閉じる'、無効: false }、
    { 名前: '科xxxx', 無効: false },
    { 名前: '人xxxx', 無効: false },
  ];
  const [checkedTag, setCheckedTag] = useState(tabsList[0])
  戻り値 (<div>
    <HeaderTtabs tabsList={tabsList} checkedTag={checkedTag} setCheckedMenu={(tab) => setCheckedTag(tab)} />
    <div クラス名 = {`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>);
}

'./index.scss' からスタイルをインポートします。
'react' から React をインポートします。
'antd' から { message } をインポートします。

// タグタイプエクスポートタイプtagType = {
  name: 文字列、// タグ名、一意 disabled?: ブール値 // 無効にするかどうか }

/**
 * サブページタブバー * @param props
 */
デフォルト関数をエクスポートします(props: {
  tabsList: tagType[], // タグリスト selectedTag: tagType, // 現在選択されているタグ setCheckedMenu: (menu: tagType) => void // タグクリックコールバック }) {
  const {tabsList、checkedTag、setCheckedMenu} = プロパティ
  const setCheck = (メニュー: タグタイプ) => {
    メニューが無効の場合
      message.warning('機能はまだ利用できません');
      戻る
    }
    setCheckedMenu(メニュー)
  }
  戻り値 (<div className={`${style.tag_area} ${style.epidemic_area}`}>
    {
      tabsList.map((アイテム) => (
        <div className={`${style.tag} ${checkedTag.name === item.name ? style.checked : ''} ${style.epidemic}`} key={item.name} onClick={() => setCheck(item)}>
          {アイテム名}
        </div>
      ))
    }
  </div>)
}

.タグエリア{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  上マージン: -20px;
  背景色: #fff;
  下マージン: 20px;
  @media 画面のみ (最大幅: 768px) {
    & {
      上マージン: 10px;
    }
  }
}

.タグ {
  // フレックス: 1;
  //マージン: 0 15px;
  最小幅: 130px;
  パディング: 10px;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  背景色: #fff;
  高さ: 50px;
  色: #333;
  カーソル: ポインタ;
  遷移: すべて .3s;
  // ボックスシャドウ: 5px 3px 4px #999;
  フォントサイズ: 18px;
  // 境界線の半径: 10px;
  境界線の半径: 6px 6px 0px 0px;
  @media 画面のみ (最大幅: 768px) {
    & {
      フォントサイズ: 14px;
      マージン: 0 5px;
      最小高さ: 30px;
      テキスト配置: 中央;
      パディング: 5px;
    }
  }

  &.チェック済み{
    色: #fff;
    背景色: #1E9FFF;
  }
  &:ホバー{
    色: #fff;
    背景色: #1E9FFF;
  }
}


// 浙江省の疫病予防のための 4 つのタブ スタイル。epidemic_area{
  コンテンツの配置: 左;
  マージン: 10px 20px;
  パディング:10px;
}

。伝染病{
  マージン:0 10px;
  幅: 200ピクセル;
  背景: rgba(20, 146, 255, 0.1);
  境界線: 1px 実線 #1492FF;
  ボックスのサイズ: 境界線ボックス;
  境界線の半径: 4px;
  高さ: 44px;
}