前端表单详情渲染,历史记录对比,变化部分标记,怎么实现比较好
react ,表单是一个抽象 json ,若干 type ,每种 type 编辑时、详情时各一个组件,对应渲染。
现在详情时要标记出和上次有变化的部分,颗粒度还比较细,要具体到值变化。
比如一个多选项,上一次 a 、b ,这次 b 、c ,那 c 就会被标记(标红或者下划线)。
组件简单点还好说,但是有些表单项,对应的值也是一个复杂的对象,渲染出来是一个按钮,点进去是个弹窗。
===我有两个想法
第一,比较搬砖点,那就是对每种 type 的详情组件单独改造,新旧值拿 isEqual 对比出来一个个插值处做判断和适配。
但是 type 是随意写的,不一样的表单项,都可以单独起个 type ,维护一个组件,别的地方也会改造表单 json 加点东西,那都得维护这一套,很麻烦。
第二就是搞个通用组件,新旧值都渲染,旧的 hidden ,然后 dom diff ,自动给有变化的文本节点加 span 标出来,但感觉会比较难搞,和 react 搭配起来、以及性能可能会有问题?
问问大伙还有啥好想法。