为什么 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 构建。

在添加开发工具之前。

添加开发工具后。 

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