如何在React-devtools组件树中隐藏指定父节点以外的所有组件？

实现仅展示App节点及下属组件的操作 #

• 打开React DevTools组件面板右上角的齿轮图标，进入设置界面
• 切换到「组件过滤」选项页，点击添加新的过滤规则
• 过滤类型选择 组件名 匹配，规则行为选择「隐藏」，匹配规则填写正则 ^(?!App$|App\/.*)

  该正则的作用是隐藏所有既不匹配根节点App、也不属于App子节点路径的组件，刚好满足只保留App节点往下所有组件的需求

• 保存规则后返回组件树面板即可看到过滤后的效果

后续其他节点过滤适配方案 #

如果需要更换要保留的根节点，只需要修改正则中的根节点名称即可，比如要保留Dashboard节点及下属组件，将正则修改为 ^(?!Dashboard$|Dashboard\/.*) 即可。

原ExpoRoot$规则失效原因 #

你之前使用的ExpoRoot$规则未生效，是因为该规则采用的location匹配是针对组件对应的文件路径生效，无法作用于组件树的层级筛选逻辑。如果只是要屏蔽Expo默认注入的外层组件，也可以直接添加多条组件名隐藏规则，分别匹配ExpoRoot、ExpoAppContainer等外层组件，也可以达到同样的过滤效果。

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