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