web-dev-qa-db-fra.com

Les outils de développement de React affichent mon composant comme inconnu

J'ai le composant simple suivant:

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

Quand je le cherche dans les outils de développement de rea, je vois:

 enter image description here

Est-ce parce que j'ai besoin d'étendre le composant React? Dois-je créer cela en tant que variable et le faire?

reactjsgoogle-chrome-devtools
26
Sequential

Cela se produit lorsque vous exportez une fonction anonyme en tant que composant. Si vous nommez la fonction (composant) puis l'exportez, elle apparaîtra correctement dans les outils de développement de React.

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

Actuellement, il n'y a aucun moyen de changer l'affichage de <Unknown> dans l'inspecteur devtools sans nommer la fonction avant de l'exporter, comme l'a dit Michael. Mais si cette question de github est résolue, il y en aura peut-être à l'avenir.

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

0
Stephen