React编写Tab与SideBar联动组件

相关技术

React，antd-mobile

antd-mobile组件

SideBar，Tabs，JumboTabs

需求描述

需要将后端传输的树形数据进行展示，通过tab进行联动，点击后会展示相关产品信息。

代码实现

点击乳饮会在左侧显示乳饮下的SKU，点击SKU后右侧的界面会显示出Tabs，点击Tab会在主要界面显示product，可以自行对product进行数据展示。以下是文件结构

在page下编写一个Home组件，在components下编写一个Siderbar组件，将Home组件添加到App.tsx文件中，Siderbar添加到Home组件中。

import React from 'react';
import { Button, NavBar } from 'antd-mobile';
import Side from '../../components/Sidebar';

const Home: React.FC = () => {
  return (
    <div>
      <NavBar>手机主页</NavBar>
        <div style={{ textAlign: 'center' }}>
          <h2>欢迎来到手机主页</h2>
          <p>这是一个使用 React 和 TypeScript 构建的手机主页示例</p>
          <Button>开始体验</Button>
          <Side></Side>
        </div>
    </div>
  );
};

export default Home;

Side中的代码，现还未使用形成

import React, { useState } from 'react';
import { JumboTabs, SideBar, Tabs } from 'antd-mobile';
import { tabs } from './tabs';
import './index.css'

const Side: React.FC = () => {
    const [activeTab, setActiveTab] = useState<string>("400000");
    const [sidebarData, setSidebarData] = useState<Array<any>>([]);
    const [secondClassListData, setSecondClassListData] = useState<Array<any>>([]);
    const [productData, setProductData] = useState<Array<any>>([]);

    /**
     * @Author: Hongjiaqin
     * @description: Find the selected tab's data
     * @param {string} key
     * @return {*}
     */
    const handleTabChange = (key: string) => {
        setActiveTab(key);
        const selectedTab = tabs.find(item => item.code === key);
        if (selectedTab) {
            setSidebarData(selectedTab.secondClassList);
            setSecondClassListData([]);
            setProductData([]);
        } else {
            setSidebarData([]);
            setSecondClassListData([]);
            setProductData([]);
        }
    };

    const handleSidebarItemClick = (key: string) => {
        const selectedTab = sidebarData.find(item => item.code === key);
        setSecondClassListData(selectedTab.secondClassList);
        setProductData([]);
    };


    const handleProduct = (key: string) => {
        const selectedTab = secondClassListData.find(item => item.code === key);
        setProductData(selectedTab.productList);
    }

    return (
        <div>
            <Tabs
                activeKey={activeTab}
                onChange={key => handleTabChange(key)}
            >
                {tabs.map((item, index) => (
                    <Tabs.Tab
                        title={item.className}
                        key={item.code}
                    />
                ))}
            </Tabs>

            <div className="container">
                <div className="side">
                    <SideBar
                        onChange={key => handleSidebarItemClick(key)}
                    >
                        {sidebarData.map(secondItem => (
                            <SideBar.Item
                                title={secondItem.className}
                                key={secondItem.code}
                            />
                        ))}
                    </SideBar>
                </div>
                <div className="main">
                    <JumboTabs
                        className="jumboTabs"
                        onChange={key => handleProduct(key)}
                    >
                        {secondClassListData.map(item => (
                            <JumboTabs.Tab
                                title=''
                                description={item.className}
                                key={item.code}
                            />
                        ))}
                    </JumboTabs>
                    <div>
                        {productData.map(item => (
                            <>
                                <div>产品编号：{item.detcCode}</div>
                                <div>产品名称：{item.detcName}</div>
                            </>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Side;

所使用的基本样式

.container {
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  [data-prefers-color='dark'] & {
    background-color: unset;
  }
}

.side {
  flex: none;
}

.main {
  flex: auto;
  padding: 0 24px 32px;
  overflow-y: scroll;
  font-size: 12px;
}

.adm-jumbo-tabs-tab-description {
  border-radius: 0px;
  padding: 5px 12px;
}