如何解决Material UI Tabs结合react-scroll时指示器不切换问题

问题背景 #

MaterialUI Tabs 默认仅展示单个标签页内容，我开发的组件将所有标签页内容堆叠，借助react-scroll实现点击标签页滚动到对应内容区域的功能。目前导航滚动功能正常，但Tabs的指示器位置无法随点击切换。

react-scroll 相关状态触发属性说明 #

react-scroll 提供了两个状态触发 props：onSetActive（元素激活时触发）、onSetInactive（元素失活时触发），以及用于标记激活状态的activeClass属性，示例代码如下：

<Link
  to={tab.label}
  id={tab.id}
  className={classes.tab} // 自定义样式类
  spy={true} // 监听滚动变化
  activeClass="active" // 激活时添加的类名
  onSetActive={()=>handleOnSetActive()} // 元素激活时触发回调
  onSetInactive={()=>handleOnSetInActive()}// 元素失活时触发回调
  containerId="containerElement" 
  onClick={()=> scrollToContent(tab.label, tab.id)}>  

当前问题表现 #

页面加载时，MaterialUI 默认将指示器分配给第一个标签页，但点击其他标签页后，虽然能正常滚动到对应内容区域，但指示器不会移动，且控制台显示activeClass并未重新分配给当前点击的标签页。

补充排查结果 #

进一步排查发现，通过medias.map()生成的标签页元素中，value属性始终未更新，直接设置value={index}也无效，所有元素的value都停留在初始值0。由于标签页数据来自API，无法直接给tabs数组添加value字段，需要实现将index正确传入value属性的方案。

解决方案 #

1. 手动维护Tabs激活状态 #

放弃依赖react-scroll的activeClass自动赋值，改用React状态控制Tabs的value：

• 声明状态变量activeTabIndex，初始值设为0
• 在onSetActive回调中，根据当前激活标签页的唯一标识（如label或id）找到对应index，更新activeTabIndex
• 将Tabs组件的value绑定为activeTabIndex

示例代码片段：

const [activeTabIndex, setActiveTabIndex] = useState(0);

const handleOnSetActive = (targetLabel) => {
  // 根据滚动目标的label匹配对应标签页的index
  const matchedIndex = medias.findIndex(item => item.label === targetLabel);
  if (matchedIndex !== -1) {
    setActiveTabIndex(matchedIndex);
  }
};

// Tabs组件绑定状态值
<Tabs value={activeTabIndex} ...>
  {medias.map((media, index) => (
    <Tab
      key={media.id} // 使用唯一id作为key，避免渲染异常
      label={media.label}
      value={index}
      component={Link}
      to={media.label}
      spy={true}
      onSetActive={() => handleOnSetActive(media.label)}
      // 其他自定义属性
    />
  ))}
</Tabs>

2. 修复map循环的value绑定问题 #

若直接设置value={index}无效，检查以下两点：

• 确保medias.map()的key使用唯一标识（如media.id），禁止用index作为key，避免React复用组件导致的状态不更新
• 确认API返回的medias数组在获取后正确更新，没有被意外重置或覆盖

3. 同步滚动监听与Tabs状态 #

开启react-scroll的spy和smooth属性，同时设置合理的offset值，确保滚动定位准确并触发状态更新：

<Link
  ...
  spy={true}
  smooth={true}
  offset={-70} // 根据页面头部高度调整偏移量，保证内容定位精准
  onSetActive={() => handleOnSetActive(media.label)}
/>

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