antd源碼分析之——標籤頁（tabs 2.Tabs關鍵組件功能實現）

因爲ant Tabs組件結構較複雜，共分三部分敘述，本文爲目錄中第二部分（高亮）

目錄

1、組件結構

antd代碼結構

rc-ant代碼結構

一、組件樹狀結構

二、Context使用說明

三、rc-tabs中只在example、test中使用的組件說明

2、Tabs關鍵組件功能實現

一、Tabs（antd）

二、RcTabs

三、Sentinel哨兵

四、InkTabBarNode

3、Tabs的滾動效果

ScrollableTabBarNode 

2、Tabs關鍵組件功能實現

一、Tabs（antd）

 antd中的Tabs主要控制可編輯態和Tabs額外的按鈕，具體tab功能實現交給rc-Tabs，具體內容見下圖

 

render方法源碼對照

 

 

二、RcTabs

 

三、Sentinel哨兵

sentinel哨兵負責監聽tab鍵盤事件，tab鍵focus焦點向後移動，shift+tab鍵焦點向前移動

先後關係以下圖所示

 

 代碼 

 

四、InkTabBarNode

 inkTabBar爲當前active狀態tab下的藍色高亮條，關鍵邏輯在於計算高亮條的高度和偏移量，詳細代碼及邏輯見下圖註釋