antd源碼分析之——柵格（Grid）

官方文檔 https://ant.design/components/grid-cn/

 

目錄

1、antd中的Grid

　　代碼目錄

　　一、總體思路

　　二、less文件結構圖（♦♦♦重要）

　　3、less實現邏輯圖（♦♦♦重要）

　　四、源碼節選：antd/components/grid/style/mixin.less

　　五、源碼節選：antd/components/grid/col.tsx

 

1、antd中的Grid

Grid沒有使用React 底層基礎組件。Grid的特色在於css樣式的控制，本次着重對css結構進行了梳理

代碼目錄

一、總體實現思路

col

• less負責生成 ant-col-1 到 ant-col-24 的樣式
• 組件tsx中負責根據父組件傳入的props屬性，生成本身使用的class名稱

row

• 處理不一樣size下處理整行寬度
• 處理間距gutter

二、css文件結構圖

三、col中less實現邏輯圖

 

 

 四、源碼節選：antd/components/grid/style/mixin.less

 

 

 五、源碼節選：antd/components/grid/col.tsx