自定义字段设计思路

mamakoko

于 2020-12-27 20:45:24 发布

阅读量4.9k

点赞数 4

文章标签： reactjs javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/weixin_44778123/article/details/111467088

版权

本文介绍了一种在ReactJS项目中设计自定义字段的方法，旨在减少前端团队的配置工作并满足用户定制需求。通过定义字段、设计自定义表、使用hook实现，以及处理引用类型的字段，实现了管理员配置单据字段的功能。文章还提到了可能遇到的缓存和规则循环问题，并指出已成功解放前端的配置任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因

目前在做一个校园ERP项目，使用React技术栈。每个模块基本都涵盖列表、详情、编辑页面，虽然已经封装好组件，可快速搭建页面，但每个组件还是需要硬编码配置，以实现业务逻辑。
为了减少前端团队的繁琐写配置任务，想设计出通过管理员自行配置每一种单据的字段，还能满足用户定制化需求。

设计思路

因为已经封装好组件，每个组件传递特定的参数即可自动渲染，所以基本思路就是

系统字段 + 自定义字段 => 处理程序 => 生成配置 => 塞给组件渲染

定义字段

整个单据需要用到的字段分为系统字段与自定义字段，系统字段是根据表结构定义的，自定义字段则是用户可以随意新增。
首先需要拿到数据字典，毕竟要偷懒到底，硬编码是不可能硬编码的，项目中使用的GraphQL，可以很方便取到所有数据字典(没有的话想办法让后端提供😄)。
自定义字段定义的格式最好与系统字段保持一致，这样前端也就不用关心是什么字段，统一处理，更加方便。
在这里插入图片描述

设计自定义表

思维导图，仅供参考

最低0.47元/天解锁文章

评论 4

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。