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

[目前，如迈克尔所说，如果没有在导出函数之前先命名函数，就无法在devtools检查器中将其显示为<Unknown>。但是，如果这个github问题得到解决，将来可能会出现。

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