reactjs - React Developer Tools 将所有组件显示为“匿名”

Question

我已经在 Google Chrome 上安装了 React Developer Tools 扩展来调试用 TypeScript 编写的 React 应用程序，但是一旦我开始调试应用程序并打开“组件”窗口，所有组件都显示为“匿名”。

当然，该应用程序主要使用功能组件。

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

Answer 1

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

参考这个 - https://github.com/facebook/react/issues/17876

或尝试此处提到的解决方案 - React Dev 工具将我的组件显示为未知

Answer 2

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

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

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

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

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

export default CustomComponent;

// or

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