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