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

Question

当您有以下内容时，React 开发工具可以完美运行（在组件选项卡中正确显示组件的名称）：

const MyComponent = ...
export { MyComponent }

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

export const MyComponent = ...

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

一般内联导出有什么问题吗？

Answer 1

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

所以你也是

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

    MyComponent.displayName = "MyComponent";

Answer 2

如果它仍然没有解决，因为它不适合我，我找到了一个解决方法，我补充说 -

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

添加到我的webpack.config.js并确保在添加属性后启动 webpack 构建。

在添加 devtool 之前。

添加开发工具后。

来源： https : //webpack.js.org/configuration/devtool/