前端开发，遇到 UI 完全一致，但是数据结构完全不一致的情况，怎样处理才更易维护更加优雅呢

[mouyase]

比如说现在有一个带图片的列表页面(类似小红书主页，B 站主页等)，然后项目中同时有 N 个相似的页面。

但是可能组件 A 的数据结构为

[
    {
        "name": "数据 1",
        "url": "https://a.cn/1.jpg"
    },
    {
        "name": "数据 2",
        "url": "https://a.cn/2.jpg"
    },
    {
        "name": "数据 3",
        "url": "https://a.cn/3.jpg"
    }
]

B 组件的结构可能为

[
    {
        "title": "数据 1",
        "cover": {
            "url": "https://a.cn/1.jpg"
        }
    },
    {
        "name": "数据 2",
        "cover": {
            "url": "https://a.cn/1.jpg"
        }
    },
    {
        "name": "数据 3",
        "cover": {
            "url": "https://a.cn/1.jpg"
        }
    }
]

类似这种不同的数据。

而且不同的页面里面可能也会带有不同的交互。

因为项目里面有很多这种 UI 类似，功能类似，但是接口数据结构不同的组件。 所以请问有什么好办法比较容易的处理这种数据吗。

[mouyase]

@DimitriYoon 后入场的项目没办法（

[BoomMan]

@mouyase 组件仅考虑输入输出，具体在什么时候转换，是生产关系决定的，jsonpath 可以配置化的很好解决这个问题。