Warm tip: This article is reproduced from serverfault.com, please click

Why does React dev tools show my component as Anonymous?

发布于 2020-03-23 18:44:00

React dev tools works perfectly (properly shows the name of the component in components tab) when you have something like:

const MyComponent = ...
export { MyComponent }

But if you change it to inline exporting:

export const MyComponent = ...

it displays the component name as Anonymous.

Is something wrong with inline exporting in general?

Questioner
Boris Parfenenkov
Viewed
0
Iskandar Reza 2020-03-24 02:50:20

For inline exporting you need to manually specify the displayName property (I know, it's a pain).

So you do

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

    MyComponent.displayName = "MyComponent";