4.2日问题总结处理

关于antd中table组件再react中的应用

项目需求: 一个管理udp信号的页面,用react写的,使用的是antd的UI框架,这个页面的主题代码不是我写的,我负责后期的bug更改和升级开发。不得不说这个antd给我搞的挺头大,看不到,太复杂。主要用到的是table表格中的可编辑单元格。
先看一部分代码:

4.2日问题总结处理
上面是大致的代码,给table传入要渲染的数据和没列的参数对应,这样才能显示,由于我们这里设计对每行的区别操作,所以,看图
4.2日问题总结处理
componments 中配置的是每行和每行的元素。以及列中的配置渲染。

4.2日问题总结处理
因为有可更改的元素,所以说每行中要结合相应的表单操作。其中createContext() 可自行了解,这个貌似是多层传参用的。
4.2日问题总结处理
每行的元素组件渲染, 相当于每一行中的每个td的渲染。因为存在一些内部机制,所以立即理解不是很容易。我自己也不清楚其中的一些操作,具体的数据传递等等,经过了很多层的封装。
4.2日问题总结处理
这部分就是渲染之前在每一列中设置的是否可更改属性了,可更改的渲染这个表单元素,我标注的地方要注意了,这个相当于给其封装的input标签设的id名,所以不能重复,需要动态的赋值,而且在表单校验的时候也要动态的获取。我也是因为这个问题困扰了我一天的,这个会引起更改一个输入框的值整体都会变为该值的,但是奇怪的是我自己的电脑上没有发现此问题,但是现场有该问题,我也是经过了长时间的排查才发现和解决的该问题。其实这个问题的出现还是自己的技术太浅,不够细致,虽然对ui框架的原理和应用不熟悉,但是常规的思想和方法都是一样的,所以以后不论解决什么问题都要从严谨性去出发,要多想多看。