javascript - 为什么 React 开发工具将我的组件显示为匿名？

Question

当您有以下情况时，React 开发工具可以完美运行(在组件选项卡中正确显示组件的名称):

const MyComponent = ...
export { MyComponent }

但是，如果您将其更改为内联导出:

export const MyComponent = ...

它将组件名称显示为匿名。

一般内联导出有问题吗？

Answer 1

对于内联导出，您需要手动指定 displayName 属性(我知道，这很痛苦)。

所以你也是

    export const MyComponent = () => {
      //stuff happens here
    }

    MyComponent.displayName = "MyComponent";