使用MUI Base Hooks API创建Tab组件时遇No TabsContext provided错误求助

问题详情 #

我是MUI Base新手，尝试用它的Hooks API创建Tab组件时，碰到了错误提示：No TabsContext provided。开发中用到了Material UI Base里的useTabs、useTabsList、useTab钩子。

错误截图：

错误原因 #

这个报错的核心问题是：useTabsList和useTab必须在useTabs提供的上下文环境中使用。也就是说，你需要把TabsList、Tab这类依赖上下文的组件，包裹在绑定了useTabs上下文的容器组件内部，否则子钩子无法获取到必要的Tabs上下文数据。

修复方案 #

以下是修正后的核心代码示例，确保上下文传递正确：

import * as React from "react";
import { useTabs, useTabsList, useTab } from "@mui/base";

export default function App() {
  // 初始化Tabs上下文
  const tabsContext = useTabs({ defaultValue: 0 });

  // 定义Tabs容器组件，作为上下文的载体
  const Tabs = React.forwardRef((props, ref) => {
    return <div ref={ref} {...props} />;
  });

  // TabsList组件，必须传入useTabs返回的上下文
  const TabsList = React.forwardRef((props, ref) => {
    const { getRootProps } = useTabsList(tabsContext);
    return <div ref={ref} {...getRootProps(props)} />;
  });

  // Tab组件，同样需要传入上下文
  const Tab = React.forwardRef(({ value, children, ...props }, ref) => {
    const { getRootProps, selected } = useTab(value, tabsContext);
    return (
      <button
        ref={ref}
        {...getRootProps(props)}
        style={{
          padding: "8px 16px",
          border: "none",
          backgroundColor: selected ? "#1976d2" : "#e0e0e0",
          color: selected ? "#fff" : "#000",
          cursor: "pointer",
          margin: "0 4px"
        }}
      >
        {children}
      </button>
    );
  });

  return (
    <Tabs>
      <TabsList>
        <Tab value={0}>标签页1</Tab>
        <Tab value={1}>标签页2</Tab>
        <Tab value={2}>标签页3</Tab>
      </TabsList>
      {/* 可在此添加对应标签页的内容面板 */}
    </Tabs>
  );
}

关键注意点：

• 调用useTabsList和useTab时，必须传入useTabs返回的上下文对象
• 所有使用这两个子钩子的组件，都要放在Tabs容器组件内部，确保上下文能正常传递

内容的提问来源于stack exchange，提问作者Shuaib Khan