React Material v4如何实现Tabs组件响应式切换方向？

核心实现逻辑是通过官方提供的响应式监听能力判断当前屏幕尺寸，动态给orientation属性传对应值即可，不需要手写resize事件监听。

具体实现步骤 #

1. 引入官方内置的响应式相关hook
   MUI v4 自带useMediaQuery hook专门做断点匹配，比原生手写监听多了防抖、内存自动回收、SSR兼容的优化，直接从核心包引入即可：

import { useTheme, useMediaQuery, Tabs /* 其他你用到的Tab等组件 */ } from '@material-ui/core';

2. 在组件内声明断点匹配状态
   在函数组件内部调用hook，判断当前是否处于移动端断点，默认MUI的md断点为960px，你可以根据自己的业务分界调整断点值：

const ProfileTabs = () => {
  const theme = useTheme();
  // 匹配宽度小于md断点（即移动端场景）时isMobile为true，桌面端为false
  // 如果要自定义分界宽度，也可以直接写媒体查询：const isMobile = useMediaQuery('(max-width:768px)')
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));

  // 原有的tab切换逻辑
  const [currentTab, setCurrentTab] = React.useState(0);
  const handleTabsChange = (event, newValue) => {
    setCurrentTab(newValue);
  };

  return (
    <Tabs
      // 动态传入方向属性
      orientation={isMobile ? "horizontal" : "vertical"}
      onChange={handleTabsChange}
      scrollButtons="auto" 
      value={currentTab}
      variant="scrollable"
      className={classes.profileTabs}
    >
      {/* 你的Tab子项 */}
    </Tabs>
  )
}

注意事项 #

• 切换方向后如果自定义样式有适配需求（比如垂直Tabs需要固定左侧宽度、水平Tabs需要撑满容器宽度），可以给className也传入动态值，或者在makeStyles样式定义里直接写响应式断点样式，两种方式可以配合使用。
• 原代码里的scrollButtons="auto"和variant="scrollable"属性同时兼容水平、垂直两个方向，不需要额外修改。
• 不要手动给window绑定resize事件做判断，官方的useMediaQuery已经做了全场景的兼容优化，手写监听容易出现内存泄漏、触发频繁导致的性能问题。
• 如果使用类组件，可通过withWidth高阶组件注入当前屏幕宽度信息做判断，官方更推荐函数组件配合hook的写法。

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