React 弹窗组件设计难题

2022-04-20 · 周三疲惫多云

今天的工作也依旧在重构 SA 项目的组件,有一个特别犯难的地方来了。部分页面有大量的弹窗组件,而原先的代码上,这个弹窗组件的触发显示均是在表格组件里面进行的。

关于弹窗本身,我看过一些别人的方法,例如使用 ref 把弹窗组件内的状态放在父组件里管理,但这本质上也是让父组件管理弹窗状态,和上述问题无关。

// 我想象的预期效果
页面
 - 表格组件 (onShowModal 传给页面)
   - 触发按钮
 - 弹窗组件 (展示内容需要寄托在页面组件上,可能为空,组件内需要判断)

// 待重构项目的实现(如果组件拆分后,按函数作用域表示)
页面
 - 表格组件 (<Table /> 这种)
   - 行组件 (每列一个按钮,实际上是一个弹窗组件)
     - 弹窗组件 (展示内容直接从行里面传入,不会出现传参数据为空的情况)
       - 触发按钮 (在弹窗里面)

// 待重构项目的实现(实际实现,按函数作用域表示)
页面
 - 表格组件 (代码完全和弹窗处于一个层级,用 const 声明的函数,而不是写在 jsx 的组件)
 - 行组件 (同相同层级,函数返回,一行一个弹窗组件)
 - 弹窗组件 (展示内容直接从行里面传入,不会出现传参数据为空的情况)
   - 触发按钮 (在弹窗里面)

我想象的这种方式看起来是挺合理的,功能组件完全扁平化,逻辑清晰了不少,组件嵌套的情况减少了,但是有个问题,如果弹窗数据依赖现有表格内容,要怎么办?传入的 data 参数总会有空的情况,组件里面里面写判断逻辑又感觉很不优雅。

老代码现有实现的这种情况,会造成多个组件的内容充俗在了一个组件上,会产生“一个组件上千行代码”的盛状,后期可读性和可维护性特别低。而如果直接按照这种方式去拆分组件又有个弊端,一旦弹窗里面的内容保存后需要让页面重新请求一次数据该怎么办?总不能一层又一层的采用参数 onXXXX 往上传给页面组件吧。

晚上的话主要和测试同学会议,熟悉了一下我这个重构项目里面最复杂页面的业务逻辑,基本用途都明白了,最后搞到了差不多十点半(测试真卷,还不提加班),而且还没有完全讲完,明天继续。

都卷成这样子了,哪还有心思继续搞自家项目啊!不过昨天「保罗 API Next」的 Redis 问题还是凑合搞定了,明天晚上再直播写接口吧!

神里绫华🐱🐱
Regret

Regret

Eric Chiryoku
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 0 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

近期评论

鲍小螺: 前辈多多指教!ahu: 后生可畏寻梦xunm: 真不错,板子很好看。timochan: 太惨了( ,更新暴毙,如果恢复没成功,数据也 dump 不出来鲍小螺: 在这部分对话中,广树和保罗继续讨论生活的不同方面。保罗提到了技术更新和国内的优秀 IT 技术。广树解释了在国内积累的经验如何在日本产生穿越的感觉,并表达了对于日本生活节奏的喜爱。他还提到了医疗水平的差异和对于生活方式的感受。保罗表示,通过动漫和现实的对比,艺术来源于现实,日本生活的确有着独特之处。他们讨论了国内的生活节奏和就医等方面的压力,以及个人选择的自由。最后,他们也谈到了不结婚不买房的选择和对于房价的困扰。鲍小螺: 该对话进一步讨论了房地产和税收的问题。保罗提到了国内的房地产税和增值税以及日本的固定资产税。广树解释了日本房地产税的收取方式,以及房产税对于国内房产的影响。他认为,与国内相比,日本的房子质量和服务更好。保罗提出疑问,为什么自己拥有的地也要交税。广树解释了类似增值税的原理,并指出在日本拥有房产是稳定安全的。最后,保罗表示从广树的角度来看,情况确实是如此。鲍小螺: 这篇文章的聊天记录也尝试过用 GPT 总结,结果并不是太好,不知道是不是 Prompt 的问题,实际出来的内容过于简练了,于是又耗费了半小时写完,呼~
奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君