Reagieren Dev Tools meine Komponente zeigen, wie Unknown

Question

ich folgende einfache Komponente haben:

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

Als ich es in den Entwickler-Tools reagieren sehen, ich sehe:

dies ist weil ich die React-Komponente erweitern muss? Muss ich dies als Variable erstellen und tun?

Answer 1

Dies passiert, wenn Sie eine anonyme Funktion als Ihre Komponente exportieren. Wenn Sie die Funktion (Komponente) benennen und dann exportieren, wird sie in den React Dev Tools korrekt angezeigt.

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