React Native Web 调试中没有组件名称

如何解决React Native Web 调试中没有组件名称

尝试在 Web 浏览器中调试 React Native 时，我看不到任何组件名称。无论是通过标准浏览器 DevTools 还是 React（组件）浏览器扩展，我都没有看到任何对组件名称甚至类名称的引用。

组件名称在 React 扩展中被 View、Anonymous、Screen 等混淆。部分代码是如何使用 React Native 的默认View 和 Screen 组件编写的。但我希望看到最终嵌套的子组件。

CSS 类采用 css-xyz123 格式，似乎与其实际的组件和类名称无关。

有谁知道为什么会发生这种情况或如何让组件名称在 Web 调试中可见？我考虑了几个原因：

• 组件是如何编写的（功能组件，通常用 Mobx 观察者包装）
• Babel 编译器设置
• 其他 minifiction 或 React Native 构建设置

谢谢！

解决方法

像“Anonymous (ForwardRef)”这样的组件名称意味着您的源代码可能看起来像这样：

<div>

传递给 const Component = React.forwardRef((props,ref) => {...}); 的函数是一个匿名函数，因此没有可供 DevTools 读取的名称。 （请注意，对于内置浏览器工具也是如此。）

要“修复”此问题，您可以使用命名函数。有两种选择：

forwardRef

或者：

const Component = React.forwardRef(function MyComponent(props,ref) {...});