React Developer Tools 将所有组件显示为 "Anonymous"

Question

我已经在 Google Chrome 上安装了 React Developer Tools 扩展来调试用 TypeScript 编写的 React 应用程序，但是一旦我开始调试应用程序并打开 "Components" window，所有组件显示为"Anonymous"。

当然，该应用程序主要使用函数组件。

有谁知道是否有办法让 React Developer Tools 在其组件树中显示组件名称？

Answer 1

如果您使用的是导出的匿名功能组件或备忘组件；它将显示为 Anonymous

或尝试此处提到的解决方案 -

Answer 2

当您像这样定义组件时会发生这种情况：

// Default arrow function export
export default () => {
    // ...
}

// Default function export
export default function() {
    // ...
}

您可以替换为以下内容来解决问题：

const CustomComponent = () => {
    // ...
}

export default CustomComponent;

// or

export default function YourComponent() {
  // ...
}

React Developer Tools shows all components as "Anonymous"