react使用tabs和tree组件联动切换后台数据

首先，引入封装好的接口

import { getTreeData} from '@/services/test';

定义树的数据变量和tabs的key变量，初始值分别为空数组和'sing'。

const [treeData, setTreeData] = useState<any>([])
const [activeKey, setActiveKey] = useState('sing');

定义函数，调后台接口，传所需数值，将activeKey写成可变值，更新treeData数据。

const getList = async () => {
    const res = await getTreeData({
      keyData: `${activeKey}`,
    });
    setTreeData(res);
  };

将树的数据初始化出来，写入需要改变的activeKey。

useEffect(() => {
    getList();
  }, [activeKey]);

dom部分（这里使用PageContainer自带的tabs）

<PageContainer
    title="切换树"
    tabActiveKey={activeKey} //初始高亮tab
    onTabChange={key => {
        setActiveKey(key);
      }} //切换tabs
    tabList={[
        {
          tab: '唱',
          key: 'sing',
        },
        {
          tab: '跳',
          key: 'dance',
        },
        {
          tab: '拉普',
          key: 'rap',
        },
        {
          tab: '篮球',
          key: 'basketball',
        },
      ]}
>
    <Layout>
       <Layout.Sider
           width={260}
       >
           <Tree
               showLine
               treeData={treeData}
            />
        </Layout.Sider>
    </Layout>
</PageContainer>

效果图：（保密需要，不显示真实数据，但可以看到数据的切换效果）