如何在React中封装可复用Material UI Tabs组件并解决仅显示首个标签的问题

问题核心原因 #

• 组件逻辑耦合：你当前封装的代码把Tabs容器和单个Tab项的逻辑写在了一起，内部硬编码仅渲染1个Tab标签，因此只能看到索引为0的首个标签
• 状态作用域错误：选中状态定义在单个Tab组件内部，就算新增多个Tab实例，每个Tab都会维护独立的选中状态，无法实现切换联动
• 缺少子组件遍历逻辑：没有根据传入的子组件自动生成对应数量的标签、面板的逻辑，无法适配多标签场景

修正后的封装代码 #

创建/src/common/Tabs.jsx文件，代码如下：

import React from 'react';
import Box from '@mui/material/Box';
import MuiTabs from '@mui/material/Tabs';
import MuiTab from '@mui/material/Tab';

// 无障碍属性生成工具
const a11yProps = (index) => ({
  id: `tab-${index}`,
  'aria-controls': `tabpanel-${index}`,
});

// Tab面板基础组件
const TabPanel = (props) => {
  const { children, value, index, ...other } = props;
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`tabpanel-${index}`}
      aria-labelledby={`tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ p: 2 }}>{children}</Box>}
    </div>
  );
};

// Tabs容器组件，统一管理选中状态
const Tabs = (props) => {
  const { children, tabSx, panelSx, ...rest } = props;
  const [selectedValue, setSelectedValue] = React.useState(0);

  const handleChange = (_, newValue) => setSelectedValue(newValue);

  // 遍历子组件自动生成顶部标签
  const tabLabels = React.Children.map(children, (child, index) => {
    if (!React.isValidElement(child)) return null;
    return (
      <MuiTab
        label={child.props.label}
        {...a11yProps(index)}
        {...child.props.tabProps}
      />
    );
  });

  // 遍历子组件自动生成对应面板
  const tabPanels = React.Children.map(children, (child, index) => {
    if (!React.isValidElement(child)) return null;
    return React.cloneElement(child, {
      value: selectedValue,
      index,
    });
  });

  return (
    <Box sx={{ width: '100%' }} {...rest}>
      <Box sx={{ borderBottom: 1, borderColor: 'divider', ...tabSx }}>
        <MuiTabs
          value={selectedValue}
          onChange={handleChange}
          textColor="primary"
          indicatorColor="primary"
        >
          {tabLabels}
        </MuiTabs>
      </Box>
      <Box sx={panelSx}>{tabPanels}</Box>
    </Box>
  );
};

// 单个Tab项组件
export const TabItem = (props) => {
  const { children, value, index } = props;
  return <TabPanel value={value} index={index}>{children}</TabPanel>;
};

export default Tabs;

组件使用方式 #

// 导入封装好的组件
import Tabs, { TabItem } from "../common/Tabs";
// 导入你的业务组件
import MyComponent1 from "./MyComponent1";
import MyComponent2 from "./MyComponent2";
import MyComponent3 from "./MyComponent3";

export default function JobsRecruitments() {
  return (
    <Tabs>
      {/* 有多少个Tab就加多少个TabItem，传入对应label即可 */}
      <TabItem label="第一个标签">
        <MyComponent1 />
      </TabItem>
      <TabItem label="第二个标签">
        <MyComponent2 />
      </TabItem>
      <TabItem label="第三个标签">
        <MyComponent3 />
      </TabItem>
    </Tabs>
  )
}

调整说明 #

• 拆分了容器和单个Tab项的逻辑，容器统一管理全局选中状态，所有Tab天然支持联动切换
• 通过React.ChildrenAPI自动遍历子组件生成对应数量的标签和面板，不需要硬编码Tab数量
• 支持自定义单个Tab的属性、标签栏样式、面板样式，可扩展性更高

内容的提问来源于stack exchange，提问作者Ahmed Hosny