React中Ant Design的Tabs组件如何使用items属性动态配置Tab，并在过滤时重置子组件数据？

初始化和管理 state使用 useState 来管理 detailTabList，并使用 useEffect 在 oDat 更新时重新生成 detailTabList。

import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import RequestInfo from './RequestInfo';
import ResponseInfo from './ResponseInfo';
import BureauManageInfo from './BureauManageInfo';

const { TabPane } = Tabs;

const MyComponent = () => {
  const [oDat, setODat] = useState(initialODat);
  const [detailTabList, setDetailTabList] = useState([
    {
      label: 'test1',
      key: '0',
      visiable: true,
      children: <RequestInfo oDat={oDat} iAppMod={state.type} ChangeRequestInfo={(v) => changeODat(v)} />,
    },
    {
      label: 'test2',
      key: '1',
      visiable: true,
      children: <ResponseInfo oDat={oDat} iAppMod={state.type} ChangeResponseInfo={(v) => changeODat(v)} />,
    },
    {
      label: 'test3',
      key: '2',
      visiable: true,
      children: <BureauManageInfo oDat={oDat} iAppMod={state.type} ChangeBureauManageInfo={(v) => changeODat(v)} />,
    },
  ]);

  // 更新 oDat 的方法
  const changeODat = (newODat) => {
    setODat(newODat);
  };

  // 根据 oDat 更新 detailTabList
  useEffect(() => {
    setDetailTabList([
      {
        label: 'test1',
        key: '0',
        visiable: true,
        children: <RequestInfo oDat={oDat} iAppMod={state.type} ChangeRequestInfo={(v) => changeODat(v)} />,
      },
      {
        label: 'test2',
        key: '1',
        visiable: true,
        children: <ResponseInfo oDat={oDat} iAppMod={state.type} ChangeResponseInfo={(v) => changeODat(v)} />,
      },
      {
        label: 'test3',
        key: '2',
        visiable: true,
        children: <BureauManageInfo oDat={oDat} iAppMod={state.type} ChangeBureauManageInfo={(v) => changeODat(v)} />,
      },
    ]);
  }, [oDat, state.type]);

  // 过滤和设置可见的 tab
  const visibleTabs = detailTabList
    .map((item) => {
      let tempVisible = item.visiable;
      if (item.key === '4' || item.key === '5') {
        tempVisible = false;
      }
      if (dataVForm.RadioSendKbn === dataVForm.radioRadioSendKbn && item.key === '6') {
        tempVisible = false;
      }
      return { ...item, visiable: tempVisible };
    })
    .filter((item) => item.visiable);

  return (
    <Tabs>
      {visibleTabs.map((tab) => (
        <Tabs.TabPane tab={tab.label} key={tab.key}>
          {tab.children}
        </Tabs.TabPane>
      ))}
    </Tabs>
  );
};

export default MyComponent;

1. 初始化 State:
2. 更新oDat方法:
3. 使用useEffect监听oDat和state.type的变化:每当oDat或state.type变化时，重新生成detailTabList，确保子组件接收到最新的oDat
4. 过滤和设置可见的 Tabs:根据业务逻辑过滤掉不应该显示的 Tabs。只显示visiable为true的 Tabs。
5. 渲染 Tabs:使用、Tabs`组件渲染过滤后的 Tabs 列表。