Инструменты React Dev показывают мой компонент как неизвестный

У меня есть следующий простой компонент:

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>
  )
}

Когда я ищу его в инструментах реагирования dev, я вижу:

Это потому, что мне нужно расширить компонент React? Мне нужно создать это как переменную и сделать это?

Ответ 1

Это происходит, когда вы экспортируете анонимную функцию в качестве своего компонента. Если вы назовете функцию (компонент) и затем экспортируете ее, она будет правильно отображаться в инструментах React Dev.

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

Ответ 2

В настоящее время нет никакого способа изменить его, чтобы он отображался как <Unknown> в инспекторе devtools, без указания имени функции перед ее экспортом, как сказал Майкл. Но если эта проблема GitHub будет решена, возможно, в будущем.

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

Ответ 3

Чтобы добавить к ответу Михаэля Ясперса, если вы хотите использовать именованный импорт (вместо экспорта по умолчанию), вы можете сделать так:

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

Компонент будет отображаться в React DevTools с правильным именем.

Примечание. Если вы экспортировали выражение напрямую:

export const MyComponent = props => <div />

Это будет показано как Anonymous или Unknown в React DevTools