2017-01-11 5 views
5

displayName 속성을 추가하여 반응 구성 요소의 이름을 지정하면 it considered a good practice이지만 그 이유는 확실하지 않습니다. 반응 형 문서에서는 다음과 같이 말합니다.React 구성 요소 'displayName'이란 무엇입니까?

displayName 문자열은 디버깅 메시지에 사용됩니다. JSX는이 값을 자동으로 설정합니다. JSX 깊이를 참조하십시오.

왜 그렇게 중요한가요? 내가 그것을 추가하지 않으면 어떻게 될까? (지금까지는 디버깅에 문제가 없었습니다)

구성 요소의 이름을 지정하는 방법에 대한 권장 사항이나 우수 사례가 있습니까?

+1

구성 요소 이름이 표시되지 않습니다, 그것은 디버그 힘들 것입니다 주. 그러나 Es6을 사용하여 구성 요소 (확장 구성 요소)를 만드는 경우 각 구성 요소에 대해 수동으로 표시 이름을 추가 할 필요가 없습니다. –

답변

8

나는 항상 할당 할 변수와 동일한 이름으로 displayName을 설정했습니다. 이것은 프로덕션 빌드에서 불필요한 코드 제거를 통해 제거되고 응용 프로그램 내에서 사용되어서는 안되기 때문에 개발 빌드에서만 사용되었습니다.

주로 사용되는 곳은 주로 반응 오류 메시지입니다. 이것이 디버깅에 가치가 있다고 언급 된 이유입니다. 파생 된 이름이 없으면 프로젝트에 하나 이상의 구성 요소가있는 경우 오류 메시지가 기본적으로 Component으로 디버깅하기가 매우 어렵습니다. . 여기

는 반응 소스 나 displayName을 참조하는 몇 가지 오류 메시지입니다 : 당신은 추가하지 않는 경우

Invalid Return

Inline style error

+0

displayName을 실제로 어떻게 설정합니까? 반응 문서에 따르면 구성 요소의 이름에서 유추 된 것으로 보이지만 비 HOC에 대해 수동으로 설정하는 방법은 나와 있지 않습니다. – gabrielwr

+2

정적 속성입니다. 가장 빠른 방법은 직접 설정하는 것입니다. 'hoc.displayName = "hocName";' – kwelch