React MUI Tab组件警告：期望可容纳ref的元素类型

问题根源 #

你给Tab组件的component属性传了一个匿名函数组件，而MUI底层的ButtonBase要求传入的组件必须是能持有ref的类型（比如类组件、用React.forwardRef包裹的函数组件，或者原生HTML元素），普通无ref支持的函数组件会触发这个警告。

解决方案 #

方案1：使用Tab组件的原生属性构建内容（推荐）

MUI的Tab本身提供了icon和label属性来自定义显示内容，这是官方推荐的用法，完全不会有ref问题：

<Tab
  icon={<Icon sx={{ color: ywpBlue }} title="Grid View">info</Icon>}
  label={<Typography sx={{ fontSize: "20px" }}>Project Info</Typography>}
  {...a11yProps(0)}
  onClick={() => setValue(0)}
/>

如果需要调整图标和文字的布局，可以给Tab加sx样式，或者用Tab的iconPosition属性控制位置。

方案2：用React.forwardRef包裹自定义组件

如果必须通过component自定义整个Tab结构，需要把你的自定义组件用React.forwardRef包裹，让它能接收并传递ref给内部根元素：

// 先定义带ref支持的自定义组件
const CustomTabContent = React.forwardRef((props, ref) => {
  return (
    <Box ref={ref} onClick={() => setValue(0)} {...props}>
      <Icon sx={{ color: ywpBlue }} title="Grid View">info</Icon>
      <Typography sx={{ fontSize: "20px" }} mt={-3}>Project Info</Typography>
    </Box>
  );
});

// 在Tab中使用这个组件
<Tab
  label="Project Info"
  {...a11yProps(0)}
  component={CustomTabContent}
/>

为什么之前的尝试无效？ #

你之前用<div>或<Box>包裹的写法，错误地把返回组件的函数传给了component，而不是直接传Box或div本身。比如直接写component={Box}是合法的，但component={() => <Box>...</Box>是创建了一个无ref支持的新函数组件，这才是警告的来源。

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