MUI Tabs嵌套自定义组件后无法触发切换及状态更新问题

问题根源 #

MUI的TabList会向直接子级的Tab组件自动传递交互所需的props（比如onClick、selected状态等），但你自定义的FTab组件没有接收并透传这些props给内部的Tab，导致TabList的onChange事件无法触发，选中状态也无法同步更新。

解决方案 #

修改FTab组件，让它接收所有父组件传递过来的props，并将这些props透传给内部的Tab组件。这样既保留了TabList的原生交互逻辑，又能在自定义组件里使用useSelector等钩子实现业务需求。

修改后的完整代码 #

import * as React from "react";
import Box from "@mui/material/Box";
import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
// 引入你需要的Redux钩子
import { useSelector } from 'react-redux';

export default function LabTabs() {
  const [value, setValue] = React.useState("1");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const FTab = ({ num, ...rest }) => {
    // 这里可以添加你的useSelector逻辑，从Redux获取动态标签名
    const tabLabel = useSelector(state => state.tabs?.labels[num] || `Item ${num}`);
    
    // 将所有接收的props透传给内部的Tab组件
    return <Tab label={tabLabel} value={num} {...rest} />;
  };

  return (
    <Box sx={{ width: "100%", typography: "body1" }}>
      <TabContext value={value}>
        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
          <TabList onChange={handleChange} aria-label="lab API tabs example">
            <FTab num="1" />
            <FTab num="2" />
            <FTab num="3" />
          </TabList>
        </Box>
        <TabPanel value="1">Item One</TabPanel>
        <TabPanel value="2">Item Two</TabPanel>
        <TabPanel value="3">Item Three</TabPanel>
      </TabContext>
    </Box>
  );
}

关键说明 #

• 使用...rest接收TabList传递的所有额外props（如点击事件、选中状态），并传递给内部的Tab，这样Tab就能正常响应TabList的交互，选中样式也会自动更新。
• 你可以在FTab内部自由使用useSelector获取Redux中的数据，动态渲染标签名称，完全不影响Tab的核心功能。

内容的提问来源于stack exchange，提问作者Frank DiCostanzo