時間：2020/04/26 ，轉載請注明出處。

寫在前面

antd團隊于2020年2月發布了醞釀已久的antd@4.0版本，對樣式的調整、部分組件邏輯的重構都進行了較大改動，本文針對Table的rowKey屬性重構作分析。

由一個mistake帶來的思考

在數據治理模塊的表格中使用了Table點擊表格行進而選中該行的功能1（非checkbox，點此查看官方demo），升級4.0后發現被選中表格行的className缺少了 ant-table-row-selected，導致交互效果失效。因為升級前后代碼未作變動卻出現問題，antd官方也并未聲明該部分的改動，反復排查也沒有找到問題所在。

圖 1 實現效果

后來意識到因為rowKey屬性具有默認值"key"，在不做顯式設置的情況下，組件對此無感知，antd未做聲明可能是因為該功能不會顯式地對組件的使用產生影響，而此處出錯的原因是我將rowKey錯誤地顯式設置成"id"（dataSource中record的唯一主鍵是"key"，與"id"不一致，導致錯誤）。有意思的是v3.x竟然沒報錯，并且可以正常使用?；诖艘苫笈c不解，我去翻看了源碼，探究rowKey屬性值究竟會否以及如何影響樣式的變化。

在源碼的對比中發現問題所在

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

圖 2

發現antd對Table進行了大量樣式上的改寫，其中在PR(#19678)3中新增加了一個用于修改 rowClassName 的新方法 internalRowClassName ?。

圖 3

圖 4

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

圖 5

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

帶著疑問，我將antd切到了branch@3.x-stable分支中再次查看getRowKey方法，發現 3.x中 getRecordKey 的返回值并不會受 rowKey 被錯誤設置的影響，它永遠可以返回一個正確可用的key值?，因此不會出現上述問題。

圖 6

真相大白。

如此一來，antd@3.x中rowKey屬性的值實質上并不會對組件的使用產生報錯性的影響（但會拋出warning），這也就解釋了開篇中該mistake的問題所在。4.x對rowKey屬性的改寫以及rowClassName方法的新增，優化了Table組件的正確合理使用。antd將該PR定性為重構（Refactoring）?。

圖 7

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。