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