antd新增一行页码不正确_antd-Table@4.x对rowKey属性的重构

时间:2020/04/26 ,转载请注明出处。

写在前面

antd团队于2020年2月发布了酝酿已久的antd@4.0版本,对样式的调整、部分组件逻辑的重构都进行了较大改动,本文针对Table的rowKey属性重构作分析。

由一个mistake带来的思考

在数据治理模块的表格中使用了Table点击表格行进而选中该行的功能¹(非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扩展²,快速定位到了Table@4.x中对rowKey属性的changelog。

3280faa4f490e6b0a8d7a7761c9365ed.png
图 2

发现antd对Table进行了大量样式上的改写,其中在PR(#19678)³中新增加了一个用于修改 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.mzph.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表示当前目录下的…