antd新增一行頁碼不正確_antd-Table@4.x對rowKey屬性的重構

時間:2020/04/26 ,轉載請注明出處。

寫在前面

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

由一個mistake帶來的思考

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

8b80c59616179b69b7b38685d954b3a9.png
圖 1 實現效果

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

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

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

3280faa4f490e6b0a8d7a7761c9365ed.png
圖 2

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

96ceb52219028f465ab283ea978992c4.png
圖 3

e42ec730f4bba6657e1edc5bd259bba4.png
圖 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 類名。

aecd95dac9e25e531db97efb79507d16.png
圖 5

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

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

a760c8e2bf425e86972dfc2688ea94af.png
圖 6

真相大白。

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

c7648e99f737fc5871ac161073a361cf.png
圖 7

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/529231.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/529231.shtml
英文地址,請注明出處:http://en.pswp.cn/news/529231.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

qt調用mysql調用了存儲過_Qt調用Server SQL中的存儲過程

Server SQL中的存儲過程如下:CREATE procedure PINSERTPCpcnum int,pcname varchar(50),pctype int,ipaddress varchar(50),port int,pcid int outputas--declare pcid intif exists (select * from COMPUTERTABLE where PcNum pcnum)set pcid -1elsebegininser…

pandas mysql index_Pandas從入門到精通(3)- Pandas多級索引MultiIndex

首先了解一下什么是多級索引,以及它的作用,為什么要有這個玩意。多級索引也稱為層次化索引(hierarchical indexing),是指數據在一個軸上(行或者列)擁有多個(兩個以上)索引級別。之所以引入多級索引,在于它可以使用戶能以低維度形式…

tensorflow 啟動多個session_Tensorflow源碼解析7 -- TensorFlow分布式運行時

1 概述TensorFlow架構設計精巧,在后端運行時這一層,除了提供本地運行時外,還提供了分布式運行時。通過分布式訓練,在多臺機器上并行執行,大大提高了訓練速度。前端用戶通過session.run()啟動系統執行時,tar…

shell swt 樣式_SWT之路:SWT圖像顯示

簡明現代魔法 -> Java編程語言 -> SWT之路:SWT圖像顯示SWT之路:SWT圖像顯示2009-10-03程序演示還是先用SWT Desiner創建界面程序。然后創建一個Display對象和Image對象,和一個GC對象。類org.eclipse.swt.graphics.GC是一個封裝了所有可…

swool tcp mysql_swoole/mysql(異步)

# 異步Swoole\Mysql**(要求Workerman版本>3.3.6)**## 注意:此組件由swoole底層提供,由C語言編寫,具有超高性能。## 安裝:安裝有swoole擴展即可## 示例:phprequire_once ../Autoloader.php;use Workerman\Worker;use \Swoole\My…

xamarin和mysql_Xamarin.Android 使用 SQLiteOpenHelper 進行數據庫操作

一、前言在手機中進行網絡連接不僅是耗時也是耗電的,而耗電卻是致命的。所以我們就需要數據庫幫助我們存儲離線數據,以便在用戶未使用網絡的情況下也可以能夠使用應用的部分功能,而在需要網絡連接的功能上采用提示方式,讓用戶決定…

python 絕對值誤差小于10-6_Python 被低估了的 10 個小技巧

hi,各位朋友們,小帥b回來啦,幾日不見,想我了么?今天給大家分享幾個我認為不錯的 Python 小技巧,有些可能被你低估了喲,get 起來!那么接下來就是:學習 Python 的正確姿勢俗…

java bean驗證_javaBean--登錄驗證

packagecom.JAVABean;importjava.util.HashMap;importjava.util.Map;publiccla***egister{privateStringname;privateStringage;privateStringemail;privateMaperrorsnull;//聲明一個保存全部錯誤信息的map集合publicRegister(){//在構造方法中初始化屬性this.name""…

java讀取src xml文件路徑_Java獲取路徑方法相對路徑讀取xml文件方法

(1)、request.getRealPath("/");//不推薦使用獲取工程的根路徑(2)、request.getRealPath(request.getRequestURI());//獲取jsp的路徑,這個方法比較好用,可以直接在servlet和jsp中使用(3)、request.getSession().getServletContext().getRealPa…

釋放tcp連接的命令是_最實用的6個網絡命令,網絡故障不求人

很多弱電工程師朋友在項目中經常遇到一些網絡故障,需要通過一些一些命令去檢測、定位故障點,通過使用網絡命令,故障解決的工作取得了事半功倍的效果。下面就一起溫故而知新吧!一、ping命令(因特網包探索器)…

airpods2怎么查正品 ios11系統_拼多多AirPods2開箱評測,4種辦法教你驗真假,10個AirPods技巧教你玩...

大家好,Apple今天給大家分享一下拼多多上車AirPods 2無線充電盒版的經驗,順便整理了一波AirPods使用技巧,希望你用得上。入手理由自從去年10月份入手了iPhone XR,其實就挺想入款無線耳機的,所以一直在等AirPods升級換代…

java中for break的用法_java break語句的使用方法

在switch語中,break語句用來終止switch語句的執行。使程序 switch語句后的第一個語句 開始執行。在Java中,可以為每個代碼塊加一個括號,一個代碼塊通常 用大括號{}括起來的一段 代碼。加標號的格式break語句有兩種形式:無標簽和有標簽。無標簽的break語句用來跳出單…

windows文件保護_Windows系統下媲美時間機器的系統備份工具,統統免費

Windows和macOS系統誰更美?不同的人有不同的見解。但體驗過macOS之后很多電腦玩家會感嘆,TimeMachine時間機器太好用了,Windows下有沒有同類功能呢?TimeMachine提供了全盤完整備份、增量備份、文件歷史版本等功能。它們在Windows …

JAVA結課_一點心情,寫java結課考試之前

突然發現,已經好久沒有上來寫blog了,本來還以為能夠天天寫,后來發現,確是心有余力而不足啊。學期進入中段,課業慢慢多了,各種各樣的事情也接踵而來了。本學期的java課程也已經結課了,8周32個學時…

sql怎么撤回update_騰訊SQL“現役運動員”給你的實踐小技巧

引言SQL的全稱是Structured Query Language(結構化查詢語言),是一種古老而簡潔的程序設計語言。看似平平無奇,一直被各種吐槽,但卻有著眾多語言所難得的漫長壽命,并展現出極好的拓展性,在不同時期衍生出不同的子語言。…

mysql 同一帳號多次登錄_freeradius2.1.3 防止用戶帳號重復登錄

freeradius2.1.3 防止用戶帳號重復登錄一、修改 etc/raddb/sites-enabled 目錄中的default 及inner-tunnel 這兩個文件中的# Session database, used for checking Simultaneous-Use. Either the radutmp# or rlm_sql module can handle this.# The rlm_sql module is *much…

小程序input wxss_19. 教你零基礎搭建小程序:wxss-尺寸單位

這章以后的四章都是介紹小程序樣式文件——wxss 的使用,分為以下三個部分一、尺寸方案二、樣式導入三、選擇器這章先來講wxss的尺寸單位—— rpxwxss的定義:WXSS( WeiXin Style Sheets )是?套樣式語言,用于描述 WXML 的組件樣式。與 CSS 相比…

java 最優算法_java 問題 求個最優算法

不知道是不是你要的package test;import java.util.Scanner;public class Number {/*** param args*/public static void main(String[] args) {int count 15;int val 5;Scanner input new Scanner(System.in);System.out.print("請輸入開始數:");int …

某一個接口403 其他接口可以調通_Neo的務實外設指南 篇三十六:一個就夠,65W快充+C口混插+最多6個設備 - 飛利浦65W摩天輪插座_插座...

2020-10-26 15:29:0623點贊23收藏2評論嗨,大家好!我是沈少!之前曬雷電3擴展塢的時候,已經有小伙伴注意到我用來提供PD充電的是一個很小巧的魔方插座。也有朋友私下提醒我,這類產品雖然支持PD快充協議,但一般…

linux java 獲取路徑怎么寫_linux中java獲取路徑怎么寫?

linux中java獲取路徑怎么寫?在Unix/Linux中,路徑的分隔采用正斜"/",比如"cd /home/java"。在java的代碼開發中 是代表轉義字符。相對路徑和絕對路徑. 指的是當前目錄.. 指的是當前目錄的上一級目錄./book表示當前目錄下的…