時(shí)間：2020/04/26 ，轉(zhuǎn)載請(qǐng)注明出處。

寫(xiě)在前面

antd團(tuán)隊(duì)于2020年2月發(fā)布了醞釀已久的antd@4.0版本，對(duì)樣式的調(diào)整、部分組件邏輯的重構(gòu)都進(jìn)行了較大改動(dòng)，本文針對(duì)Table的rowKey屬性重構(gòu)作分析。

由一個(gè)mistake帶來(lái)的思考

在數(shù)據(jù)治理模塊的表格中使用了Table點(diǎn)擊表格行進(jìn)而選中該行的功能1（非checkbox，點(diǎn)此查看官方demo），升級(jí)4.0后發(fā)現(xiàn)被選中表格行的className缺少了 ant-table-row-selected，導(dǎo)致交互效果失效。因?yàn)樯?jí)前后代碼未作變動(dòng)卻出現(xiàn)問(wèn)題，antd官方也并未聲明該部分的改動(dòng)，反復(fù)排查也沒(méi)有找到問(wèn)題所在。

圖 1 實(shí)現(xiàn)效果

后來(lái)意識(shí)到因?yàn)閞owKey屬性具有默認(rèn)值"key"，在不做顯式設(shè)置的情況下，組件對(duì)此無(wú)感知，antd未做聲明可能是因?yàn)樵摴δ懿粫?huì)顯式地對(duì)組件的使用產(chǎn)生影響，而此處出錯(cuò)的原因是我將rowKey錯(cuò)誤地顯式設(shè)置成"id"（dataSource中record的唯一主鍵是"key"，與"id"不一致，導(dǎo)致錯(cuò)誤）。有意思的是v3.x竟然沒(méi)報(bào)錯(cuò)，并且可以正常使用。基于此疑惑與不解，我去翻看了源碼，探究rowKey屬性值究竟會(huì)否以及如何影響樣式的變化。

在源碼的對(duì)比中發(fā)現(xiàn)問(wèn)題所在

借助VSCode的gitlens擴(kuò)展2，快速定位到了Table@4.x中對(duì)rowKey屬性的changelog。

圖 2

發(fā)現(xiàn)antd對(duì)Table進(jìn)行了大量樣式上的改寫(xiě)，其中在PR(#19678)3中新增加了一個(gè)用于修改 rowClassName 的新方法 internalRowClassName ?。

圖 3

圖 4

在這個(gè)方法中，通過(guò) getRowKey 獲取正確的rowKey值，為選中行添加類名 ant-table-row-selected 從而實(shí)現(xiàn)選中行的底色效果。而 getRowKey 方法通過(guò)Table的rowKey屬性值（默認(rèn)為"key"）去獲取record["key"]的值，從而返回正確的key值?。所以當(dāng)rowKey屬性不顯式設(shè)置或設(shè)置為正確的值（record的唯一主鍵）時(shí)，getRowKey方法可以返回正確的值，從而為row添加類名。但如果rowKey設(shè)置錯(cuò)誤，則 getRowKey 返回undefined，那么 internalRowClassName 方法無(wú)法為row添加 ant-table-row-selected 類名。

圖 5

由此看到，4.0版本中要求rowKey屬性必須傳入正確的值。那么為什么*rowKey傳入錯(cuò)誤的值在3.x版本中卻沒(méi)有報(bào)錯(cuò)呢？*

帶著疑問(wèn)，我將antd切到了branch@3.x-stable分支中再次查看getRowKey方法，發(fā)現(xiàn) 3.x中 getRecordKey 的返回值并不會(huì)受 rowKey 被錯(cuò)誤設(shè)置的影響，它永遠(yuǎn)可以返回一個(gè)正確可用的key值?，因此不會(huì)出現(xiàn)上述問(wèn)題。

圖 6

真相大白。

如此一來(lái)，antd@3.x中rowKey屬性的值實(shí)質(zhì)上并不會(huì)對(duì)組件的使用產(chǎn)生報(bào)錯(cuò)性的影響（但會(huì)拋出warning），這也就解釋了開(kāi)篇中該mistake的問(wèn)題所在。4.x對(duì)rowKey屬性的改寫(xiě)以及rowClassName方法的新增，優(yōu)化了Table組件的正確合理使用。antd將該P(yáng)R定性為重構(gòu)（Refactoring）?。

圖 7

總結(jié)

以上是生活随笔為你收集整理的antd新增一行页码不正确_antd-Table@4.x对rowKey属性的重构的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。