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下的蓝色高亮条，关键逻辑在于计算高亮条的高度和偏移量，详细代码及逻辑见下图注释