fix: 修复 Tabs 左右切换渲染问题 (#894)

Tencent · Jun 17, 2022 · 56d00f8 · 56d00f8
1 parent aebfe91
commit 56d00f8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/tabs/TabNav.tsx b/src/tabs/TabNav.tsx
@@ -31,6 +31,7 @@ const TabNav: React.FC<TabNavProps> = (props) => {
     onRemove = noop,
     onChange = noop,
     activeValue,
+    children,
   } = props;
 
   // 逻辑层较多处需要判断是否为 card 类型，进行逻辑抽象
@@ -106,7 +107,9 @@ const TabNav: React.FC<TabNavProps> = (props) => {
 
     setToLeftBtnVisible(canToleft);
     setToRightBtnVisible(canToRight);
-  }, [scrollLeft, placement]);
+    // children 发生变化也要触发一次切换箭头判断
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollLeft, placement, children]);
 
   // 滚动条处理逻辑
   const handleScroll = (position: 'left' | 'right') => {