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

比如说现在有一个带图片的列表页面(类似小红书主页，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 类似，功能类似，但是接口数据结构不同的组件。 所以请问有什么好办法比较容易的处理这种数据吗。