点击按钮加载React组件及动态更新Tabs的实现方案咨询

一、组件拆分步骤 #

把原来的单组件拆成三个独立文件，每个组件只负责单一职责：

1. Navbar组件（Navbar.tsx） #

负责渲染导航栏按钮，点击时通知父组件打开指定类型的抽屉：

import React from 'react';
import { AppBar, Toolbar, Button } from '@mui/material';

interface NavbarProps {
  onOpenDrawer: (tabType: 'product' | 'solutions') => void;
}

export const Navbar: React.FC<NavbarProps> = ({ onOpenDrawer }) => {
  return (
    <AppBar position="static">
      <Toolbar>
        <Button color="inherit" onClick={() => onOpenDrawer('product')}>
          Products
        </Button>
        <Button color="inherit" onClick={() => onOpenDrawer('solutions')}>
          Solutions
        </Button>
      </Toolbar>
    </AppBar>
  );
};

2. VerticalTabs组件（VerticalTabs.tsx） #

专门处理标签页的渲染逻辑，根据传入的类型展示对应的标签和内容：

import React, { useState } from 'react';
import { Tabs, Tab, Box, Typography } from '@mui/material';

interface VerticalTabsProps {
  tabType: 'product' | 'solutions';
}

export const VerticalTabs: React.FC<VerticalTabsProps> = ({ tabType }) => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
    setActiveTab(newValue);
  };

  // 按类型定义对应的标签和内容
  const tabConfigs = {
    product: [
      { label: '产品A', content: '产品A的功能特性介绍' },
      { label: '产品B', content: '产品B的功能特性介绍' },
      { label: '产品C', content: '产品C的功能特性介绍' },
    ],
    solutions: [
      { label: '方案X', content: '方案X的应用场景说明' },
      { label: '方案Y', content: '方案Y的应用场景说明' },
      { label: '方案Z', content: '方案Z的应用场景说明' },
    ],
  };

  const currentTabs = tabConfigs[tabType];

  return (
    <Box sx={{ display: 'flex', height: 300 }}>
      <Tabs
        orientation="vertical"
        variant="scrollable"
        value={activeTab}
        onChange={handleTabChange}
        sx={{ borderRight: 1, borderColor: 'divider' }}
      >
        {currentTabs.map((tab, idx) => (
          <Tab key={idx} label={tab.label} />
        ))}
      </Tabs>
      <Box sx={{ p: 3 }}>
        <Typography>{currentTabs[activeTab].content}</Typography>
      </Box>
    </Box>
  );
};

3. Drawer组件（Drawer.tsx） #

作为抽屉容器，包裹VerticalTabs，处理抽屉的打开/关闭逻辑：

import React from 'react';
import { Drawer as MuiDrawer, Box, IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { VerticalTabs } from './VerticalTabs';

interface DrawerProps {
  isOpen: boolean;
  onClose: () => void;
  tabType: 'product' | 'solutions';
}

export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, tabType }) => {
  return (
    <MuiDrawer
      anchor="right"
      open={isOpen}
      onClose={onClose}
      sx={{ width: 350 }}
    >
      <Box sx={{ p: 2, display: 'flex', justifyContent: 'flex-end' }}>
        <IconButton onClick={onClose}>
          <CloseIcon />
        </IconButton>
      </Box>
      <VerticalTabs tabType={tabType} />
    </MuiDrawer>
  );
};

二、父组件整合与动态更新 #

在根组件（比如App.tsx）里统一管理抽屉的打开状态和当前要展示的标签类型，实现点击不同按钮切换Drawer内容：

import React, { useState } from 'react';
import { Navbar } from './Navbar';
import { Drawer } from './Drawer';

function App() {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [currentTabType, setCurrentTabType] = useState<'product' | 'solutions'>('product');

  const openDrawer = (tabType: 'product' | 'solutions') => {
    setCurrentTabType(tabType);
    setDrawerOpen(true);
  };

  const closeDrawer = () => {
    setDrawerOpen(false);
  };

  return (
    <div className="App">
      <Navbar onOpenDrawer={openDrawer} />
      <Drawer
        isOpen={drawerOpen}
        onClose={closeDrawer}
        tabType={currentTabType}
      />
    </div>
  );
}

export default App;

关键说明 #

• 完全可以复用单个Drawer组件，通过tabType属性动态传递给VerticalTabs，就能自动切换对应的标签内容，无需编写两套Drawer代码。
• 拆分后每个组件职责清晰：Navbar负责触发打开动作，Drawer负责容器逻辑，VerticalTabs负责内容渲染，后续维护更便捷。
• 状态统一放在父组件管理，符合React单向数据流原则，避免状态分散导致的逻辑混乱。

内容的提问来源于stack exchange，提问作者Max Wallace