React Dev 工具將我的組件顯示為未知

Question

我有以下簡單的組件：

import React from 'react'
import '../css.scss'

export default (props) => {
  let activeClass = props.out ? 'is-active' : ''
  return (
    <div className='hamburgerWrapper'>
      <button className={'hamburger hamburger--htla ' + activeClass}>
        <span />
      </button>
    </div>
  )
}

當我在 react 開發工具中尋找它時，我看到：

這是因為我需要擴展 React 組件嗎？ 我是否需要將其創建為變量並這樣做？

Answer 1

當您將匿名函數導出為組件時會發生這種情況。 如果您命名函數（組件）然后將其導出，它將正確顯示在 React Dev Tools 中。

const MyComponent = (props) => {}
export default MyComponent;

Answer 2

要添加到 Michael Jaspers 的答案中，如果您想使用命名導入（而不是默認導出），您可以這樣做：

const MyComponent = props => <div />
export { MyComponent }

該組件將在 React DevTools 中顯示正確的名稱。

注意：如果您直接導出了表達式：

export const MyComponent = props => <div />

這將在 React DevTools 中顯示為Anonymous或Unknown

Answer 3

我意識到原來的問題已經被正確回答了，但我只是想指出一個非常相似的問題，如果使用 React.memo() 或類似的函數，你可能會遇到。 考慮以下代碼：

const MyComponent = React.memo(props => <div>Hello</div>)
export default MyComponent

該組件仍將在 devtools 和某些 React 錯誤消息（例如 prop-types 驗證）中顯示為Anonymous 。

確保在嘗試記住它之前定義了組件可以解決此問題，例如：

const MyComponent = props => <div>Hello</div>
export default React.memo(MyComponent)

Answer 4

正如邁克爾所說，目前沒有辦法改變它在 devtools 檢查器中顯示為<Unknown>而不在導出之前命名函數。 但是如果這個 github 問題得到解決，將來可能會有。

https://github.com/facebook/react-devtools/issues/1294