React结合antd Tabs使用scrollIntoView滚动仅首尾标签页生效问题

问题原因 #

• 你只声明了单个myRef引用，但循环渲染多个TabPane时，每个标签页内的底部div都绑定了同一个ref，ref的值会被后续渲染的DOM节点不断覆盖，最终myRef.current只会指向最后一个被渲染的标签页的底部节点，所以只有首尾标签能触发滚动。
• 你绑定useEffect的依赖是全量消息集合BuzonDataAgrupado，任意标签的消息更新都会触发滚动逻辑，不会判断当前活跃的标签是哪个，自然无法滚动到当前浏览标签的底部。
• antd的Tabs默认不会渲染非活跃状态的TabPane内容，非活跃标签内的DOM节点未挂载，对应的ref为空，滚动逻辑自然失效。

解决方法 #

1. 新增状态记录当前活跃的标签key，同时用ref集合存储每个标签对应的底部DOM节点

// 存储当前活跃标签的key，默认取第一个标签
const [activeTab, setActiveTab] = useState(Object.keys(BuzonDataAgrupado)[0] || '')
// 用对象存储每个tab对应的底部节点引用，key为tab的名称
const tabBottomRefs = useRef({})

const executeScroll = () => {
  const currentTabRef = tabBottomRefs.current[activeTab]
  // 只有当前活跃标签的底部节点存在时才执行滚动
  if (currentTabRef) {
    currentTabRef.scrollIntoView({ behavior: "smooth" })
  }
}

// 改造标签切换的回调
const handleTabChange = (key) => {
  setActiveTab(key)
  // 切换标签时也滚动到底部，符合常规交互预期，不需要可以删除这行
  setTimeout(executeScroll, 0)
}

2. 修改底部div的ref绑定逻辑，按标签名存储到ref集合中
   把原来的<div ref={myRef}></div>替换为以下代码：

<div ref={el => {
  if (el) {
    tabBottomRefs.current[tabName] = el
  }
}}></div>

3. 可根据需求调整useEffect的依赖，如果你只需要在当前活跃标签的消息更新时才触发滚动，可以把activeTab也加入依赖数组，保持原依赖也可以正常运行。

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