React/React Native中子组件如何获取父组件列表？是否为反模式？

这个方案属于典型的反模式，不建议落地。

核心问题点 #

• 逻辑强绑定框架内部实现：遍历父组件列表的操作依赖框架渲染实例的内部结构，不管是Vue还是React，官方都从未对外承诺父实例的遍历逻辑会长期保持稳定，一旦框架版本升级，相关逻辑随时可能失效，后续维护成本极高。
• 隐性依赖导致可维护性暴跌：其他开发者查看imageFallBack组件的代码时，完全无法感知它的 fallback 资源和上层父组件存在关联，出现问题时排查路径会非常长，很难快速定位根因。
• 破坏单向数据流原则：组件的输出结果不再由传入的显式参数唯一决定，而是由渲染上下文隐式决定，会大幅提升组件行为的不可预测性，同一份Image组件代码在不同位置渲染可能出现完全不同的 fallback 表现，却找不到对应的显式控制逻辑。

更合理的替代实现 #

你不想逐层透传props的需求非常普遍，完全有符合框架设计规范的方案可以解决：

方案1：使用框架原生的依赖注入能力 #

React的Context、Vue的Provide/Inject、Angular的依赖注入，都是专门为解决跨层级参数传递设计的：

• 在需要自定义fallback配置的父组件层级，注入当前模块的fallback资源映射
• Image组件内部直接消费最近一层注入的配置即可，不需要中间的所有组件透传任何参数
• 整个逻辑是显式声明的，符合框架的设计原则，后续维护和排查问题都非常清晰

方案2：基于业务标识匹配全局配置 #

如果你的fallback配置是和业务模块/路由绑定的，还可以用更轻量化的方案：

• 全局维护一个fallback配置映射表，key为路由路径/业务模块唯一标识，value为对应模块的fallback图片资源
• imageFallBack组件内部直接读取当前页面的路由/所属模块标识，去配置表匹配对应资源即可，完全不需要和父组件产生任何耦合

如果确实有部分特殊场景需要和父组件类型绑定，也可以给Image组件新增一个可选的fallbackKey参数，默认取当前模块标识，直接用key去全局配置表匹配资源，比遍历父组件的逻辑可控性高很多。

内容的提问来源于stack exchange，提问作者bug00