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

Question

react中使用antd的Tabs，目前用的antd是5.17.0，因为这个版本的Tabs只能使用items来配置Tab，之前4.x.x的版本是用的TabPane。下面是Tabs的items,children是对应子组件。现在是通过useState对detailTabList里面的对象进行隐藏，根据其他的值来设置visiable，然后用filte过滤那些Tab不显示。因为这个导致children子组件{oDat}对象的值不会变(对象有多个属性)，oDat也是放在useState中，有什么办法在过滤detailTabList时，重新设置children中oDat的值吗？

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

目前是用下面的方法。tabComList只存了key、children

setEditTabs((prev) => (prev.map(item => {          let tempVisible = item.visiable;          if (item.key == "4" || item.key == "5") {            tempVisible = false;          }          if (dataVForm.RadioSendKbn ==  dataVForm.radioRadioSendKbn && item.key == "6") {            // tab页隐藏            tempVisible = false;          }          let newChildren = tabComList.find(it => it.key == item.key)?.children;          return {...item, visiable: tempVisible, children: newChildren!};        }).filter(it => it.visiable == true)      ));

Answer 1

试了一下没有你说的问题，我觉得可能是对state的理解有差异。另一个可能是你的子组件内部是不是用state保存了oDat导致的oDat更新无效。
我的测试代码如下：

export default () => {  const [visibles, setVisibles] = useState(["0", "2"]);  const [data, setData] = useState([1, 2]);  const items = [{    key: "0",    label: '0',    visible: visibles.includes("0"),    children: <>{JSON.stringify(data)}</>  }, {    key: "1",    label: '1',    visible: visibles.includes("1"),    children: <>{JSON.stringify(data)}</>  }, {    key: "2",    label: '2',    visible: visibles.includes("2"),    children: <>{JSON.stringify(data)}</>  }, {    key: "3",    label: '3',    visible: visibles.includes("3"),    children: <>{JSON.stringify(data)}</>  }];  return <>    <Button onClick={() => {      setVisibles(visibles[0] === "0" ? ["1", "3"] : ["0", "2"]);      setData(data[0] === 1 ? [3, 4] : [1, 2]);    }}>Test</Button>    <Tabs items={items.filter(item => item.visible)} />  </>}

Answer 2

初始化和管理 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 列表。