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,一经查实,立即删除!

相关文章

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是一个封装了所有可…

xamarin和mysql_Xamarin.Android 使用 SQLiteOpenHelper 进行数据库操作

一、前言在手机中进行网络连接不仅是耗时也是耗电的,而耗电却是致命的。所以我们就需要数据库帮助我们存储离线数据,以便在用户未使用网络的情况下也可以能够使用应用的部分功能,而在需要网络连接的功能上采用提示方式,让用户决定…

python 绝对值误差小于10-6_Python 被低估了的 10 个小技巧

hi,各位朋友们,小帅b回来啦,几日不见,想我了么?今天给大家分享几个我认为不错的 Python 小技巧,有些可能被你低估了哟,get 起来!那么接下来就是:学习 Python 的正确姿势俗…

释放tcp连接的命令是_最实用的6个网络命令,网络故障不求人

很多弱电工程师朋友在项目中经常遇到一些网络故障,需要通过一些一些命令去检测、定位故障点,通过使用网络命令,故障解决的工作取得了事半功倍的效果。下面就一起温故而知新吧!一、ping命令(因特网包探索器)…

airpods2怎么查正品 ios11系统_拼多多AirPods2开箱评测,4种办法教你验真假,10个AirPods技巧教你玩...

大家好,Apple今天给大家分享一下拼多多上车AirPods 2无线充电盒版的经验,顺便整理了一波AirPods使用技巧,希望你用得上。入手理由自从去年10月份入手了iPhone XR,其实就挺想入款无线耳机的,所以一直在等AirPods升级换代…

windows文件保护_Windows系统下媲美时间机器的系统备份工具,统统免费

Windows和macOS系统谁更美?不同的人有不同的见解。但体验过macOS之后很多电脑玩家会感叹,TimeMachine时间机器太好用了,Windows下有没有同类功能呢?TimeMachine提供了全盘完整备份、增量备份、文件历史版本等功能。它们在Windows …

JAVA结课_一点心情,写java结课考试之前

突然发现,已经好久没有上来写blog了,本来还以为能够天天写,后来发现,确是心有余力而不足啊。学期进入中段,课业慢慢多了,各种各样的事情也接踵而来了。本学期的java课程也已经结课了,8周32个学时…

sql怎么撤回update_腾讯SQL“现役运动员”给你的实践小技巧

引言SQL的全称是Structured Query Language(结构化查询语言),是一种古老而简洁的程序设计语言。看似平平无奇,一直被各种吐槽,但却有着众多语言所难得的漫长寿命,并展现出极好的拓展性,在不同时期衍生出不同的子语言。…

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

这章以后的四章都是介绍小程序样式文件——wxss 的使用,分为以下三个部分一、尺寸方案二、样式导入三、选择器这章先来讲wxss的尺寸单位—— rpxwxss的定义:WXSS( WeiXin Style Sheets )是⼀套样式语言,用于描述 WXML 的组件样式。与 CSS 相比…

某一个接口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表示当前目录下的…

layerconfirm 自动关闭问题 没有阻塞问题_微信新版本自动更新?赶紧关闭这个功能...

前不久安卓用户也迎来了微信新版本的更新不少伙伴惊呼“猝不及防,一觉醒来发现微信自动更新了”一时间还冲上了话题的热搜榜究竟是怎么肥事?小移了解到:原来是因为部分用户设置了“微信自动更新”那么问题来了,如何关闭微信自动更…

list steam_在 Steam 中国版上玩单机游戏也会受到防沉迷系统管控

今天看到一个消息,Steam 中国版,也就是所谓的“蒸汽平台”,最近正在测试。重点在于,哪怕你玩“理论上无需联网”的单机游戏,游玩时间也会受到著名的防沉迷系统的限制。以下是我在动点科技编写的新闻全文(原文链接是界面…

java的默认访问权限_java类的访问权限

1.解析Java有四种访问权限, 其中三种有访问权限修饰符,分别为private,public和protected,还有一种不带任何修饰符。private: Java语言中对访问权限限制的最窄的修饰符,一般称之为“私有的”。被其修饰的类、属性以及方…

github流程图_逆天插件,VSCode里也能画流程图了?Visio可以淘汰了?

vscode-drawio简介网络之大,人才百出,在开源背景下,一些功能只有你想不到,没有做不到。这不,对于写代码的程序员来说,竟然也可以在VSCode IDE里边写代码,边画逻辑流程图了。最近,在g…

spring aopalliance 包里都有什么_【九仓樱】翻包記 05 | 是什么让我的便当包里每天都带着小企鹅?!...

Sakura | 2020・05バッグ日記:< Whats in my bag ? >这里是一个全新的栏目&#xff0c;关于九仓樱の日常翻包初衷是想跟大家分享一些有趣好玩的东西想知道我到底有多少个包包吗&#xff1f;我的包包里都会有哪些你想不到的东西呢&#xff1f;LIST① MYKONOS 便当包② MY…

java setpaintmode 用法_详解Paint的各种set方法

(1) 在application配置文件中关闭硬件加速&#xff1a;android:allowBackup"true"android:hardwareAccelerated"false"android:icon"drawable/ic_launcher"android:label"string/app_name"android:theme"style/AppTheme" &g…

one more step_KDA新歌《MORE》的一些冷知识:伊芙琳换回原声,摩托车是定制的

原标题&#xff1a;KDA新歌《MORE》的一些冷知识&#xff1a;伊芙琳换回原声&#xff0c;摩托车是定制的KDA女团在2020年宣布回归后就引发了很多的关注&#xff0c;回归后也是推出了首支单曲《THE BADDEST》&#xff0c;这首歌在之后也引发了不少网友的模仿以及翻唱&#xff0c…