React Dev 도구에 내 구성 요소가 알 수 없음으로 표시됨

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

react dev 툴에서 검색하면 다음과 같이 표시됩니다.

React 컴포넌트를 확장해야 하기 때문인가요?이를 변수로 생성하여 작성해야 합니까?

이 문제는 익명 함수를 구성 요소로 내보낼 때 발생합니다.기능(구성 요소)의 이름을 지정한 다음 내보내면 React Dev Tools에 제대로 표시됩니다.

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

원래의 질문에 이미 올바르게 대답한 것은 알고 있습니다만, React.memo() 또는 유사한 함수를 사용할 경우 발생할 수 있는 매우 유사한 문제에 주목하고 싶습니다.다음 코드를 고려합니다.

const MyComponent = React.memo(props => <div>Hello</div>)
export default MyComponent

컴포넌트는 다음과 같이 표시됩니다.Anonymousdevtools 및 특정 React 오류 메시지(예: 프로펠러 유형 유효성 검사)에 표시됩니다.

컴포넌트를 메모하기 전에 컴포넌트가 정의되어 있는지 확인하면 다음과 같은 문제가 해결됩니다.

const MyComponent = props => <div>Hello</div>
export default React.memo(MyComponent)

기본 내보내기 대신 이름 있는 가져오기를 사용하는 경우 마이클 재스퍼스 응답에 추가하려면 다음과 같이 하십시오.

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

구성 요소가 올바른 이름으로 React DevTools에 표시됩니다.

주의: 식을 직접 내보낸 경우:

export const MyComponent = props => <div />

그러면 다음과 같이 표시됩니다.Anonymous또는UnknownReact DevTools에서

언급URL : https://stackoverflow.com/questions/43458971/react-dev-tools-show-my-component-as-unknown