React narzędzi Dev pokazać mój komponent jako nieznane

Question

mam następujący prosty komponent:

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

Kiedy patrzę na to w reagują dev narzędzi, widzę:

Czy to ponieważ muszę rozszerzyć komponent React? Czy muszę utworzyć to jako zmienną i zrobić to?

Answer 1

Zdarza się to podczas eksportowania anonimowej funkcji jako komponentu. Jeśli nazwiesz funkcję (komponent), a następnie wyeksportujesz ją, pojawi się ona w Narzędziach Reaguj poprawnie.

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