为什么 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/