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

Question

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?

Answer 1

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";

Answer 2

If it's still not resolved as it wasn't for me, I found a workaround, I added -

devtool: 'eval-cheap-module-source-map'

to my webpack.config.js and make sure to start the webpack build after adding the property.

Before adding the devtool.

After adding the devtool.

source: https://webpack.js.org/configuration/devtool/