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

Question

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

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

CSS 类是css-xyz123 格式，看起来与它们的实际组件和类名无关。

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

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

谢谢！

Answer 1

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

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

传递给forwardRef 的函数是一个匿名 函数，因此没有可供DevTools 读取的名称。 （请注意，内置浏览器工具也是如此。）

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

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

或者：

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