优秀网站设计参考,做分类信息网站如何,做空机构的网站,网站建设详细过程时间#xff1a;2020/04/26 #xff0c;转载请注明出处。写在前面antd团队于2020年2月发布了酝酿已久的antd4.0版本#xff0c;对样式的调整、部分组件逻辑的重构都进行了较大改动#xff0c;本文针对Table的rowKey属性重构作分析。由一个mistake带来的思考在数据治理模块的…时间2020/04/26 转载请注明出处。写在前面antd团队于2020年2月发布了酝酿已久的antd4.0版本对样式的调整、部分组件逻辑的重构都进行了较大改动本文针对Table的rowKey属性重构作分析。由一个mistake带来的思考在数据治理模块的表格中使用了Table点击表格行进而选中该行的功能¹非checkbox点此查看官方demo升级4.0后发现被选中表格行的className缺少了 ant-table-row-selected导致交互效果失效。因为升级前后代码未作变动却出现问题antd官方也并未声明该部分的改动反复排查也没有找到问题所在。图 1 实现效果后来意识到因为rowKey属性具有默认值key在不做显式设置的情况下组件对此无感知antd未做声明可能是因为该功能不会显式地对组件的使用产生影响而此处出错的原因是我将rowKey错误地显式设置成iddataSource中record的唯一主键是key与id不一致导致错误。有意思的是v3.x竟然没报错并且可以正常使用。基于此疑惑与不解我去翻看了源码探究rowKey属性值究竟会否以及如何影响样式的变化。在源码的对比中发现问题所在借助VSCode的gitlens扩展²快速定位到了Table4.x中对rowKey属性的changelog。图 2发现antd对Table进行了大量样式上的改写其中在PR(#19678)³中新增加了一个用于修改 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切到了branch3.x-stable分支中再次查看getRowKey方法发现 3.x中 getRecordKey 的返回值并不会受 rowKey 被错误设置的影响它永远可以返回一个正确可用的key值⁶因此不会出现上述问题。图 6真相大白。如此一来antd3.x中rowKey属性的值实质上并不会对组件的使用产生报错性的影响但会抛出warning这也就解释了开篇中该mistake的问题所在。4.x对rowKey属性的改写以及rowClassName方法的新增优化了Table组件的正确合理使用。antd将该PR定性为重构Refactoring⁷。图 7
